/*
 * ═══════════════════════════════════════════════════════════════════
 *  PILOTO STUDIO — DESIGN SYSTEM TOKENS v2.0
 *  Design System Base para o painel administrativo premium
 * ═══════════════════════════════════════════════════════════════════
 *
 *  Filosofia visual:
 *  - Profundidade através de camadas com transparência
 *  - Glassmorphism leve, nunca pesado
 *  - Glow sutil como identidade, não como decoração
 *  - Cada cor e sombra tem propósito semântico
 *  - Dark mode puro, sem alternância
 *
 * ═══════════════════════════════════════════════════════════════════
 */

:root {

  /* ─────────────────────────────────────────────
   * PALETA DE CORES — FUNDAÇÃO
   * ───────────────────────────────────────────── */

  /* Backgrounds — do mais profundo ao mais elevado */
  --bg-base:       #0b0f1a;   /* Fundo absoluto */
  --bg-depth:      #090d16;   /* Mais profundo que o base (wells, inputs) */
  --bg-raised:     #0f1422;   /* Superfície levemente elevada */
  --bg-elevated:   #131828;   /* Modal, popovers */
  --bg-overlay:    #171d2e;   /* Tooltips, menus */

  /* Surfaces — camadas com glass */
  --surface-glass:      rgba(19, 24, 40, 0.72);    /* Glass primário */
  --surface-glass-md:   rgba(19, 24, 40, 0.86);    /* Glass médio */
  --surface-glass-dark: rgba(11, 15, 26, 0.90);    /* Glass escuro */
  --surface-frosted:    rgba(23, 29, 46, 0.68);    /* Frost effect */
  --surface-subtle:     rgba(255, 255, 255, 0.025); /* Camada sutilíssima */
  --surface-hover:      rgba(255, 255, 255, 0.04);  /* Hover state */
  --surface-active:     rgba(255, 255, 255, 0.06);  /* Active state */

  /* ─────────────────────────────────────────────
   * IDENTIDADE DE COR — PILOTO
   * ───────────────────────────────────────────── */

  /* Azul primário Piloto */
  --brand:           #213070;
  --brand-light:     #2a3d8f;
  --brand-bright:    #3451b2;
  --brand-glow:      rgba(33, 48, 112, 0.40);
  --brand-soft:      rgba(33, 48, 112, 0.16);
  --brand-subtle:    rgba(33, 48, 112, 0.08);

  /* Accent — highlight azul vibrante para CTAs e estados ativos */
  --accent:          #4f7cff;
  --accent-light:    #7fa3ff;
  --accent-muted:    #3960d9;
  --accent-glow:     rgba(79, 124, 255, 0.28);
  --accent-soft:     rgba(79, 124, 255, 0.12);
  --accent-subtle:   rgba(79, 124, 255, 0.06);

  /* Indigo — profundidade intermediária */
  --indigo:          #6366f1;
  --indigo-soft:     rgba(99, 102, 241, 0.14);
  --indigo-glow:     rgba(99, 102, 241, 0.22);

  /* ─────────────────────────────────────────────
   * FEEDBACK SEMÂNTICO
   * ───────────────────────────────────────────── */

  --success:       #22c474;
  --success-light: #34e88a;
  --success-soft:  rgba(34, 196, 116, 0.12);
  --success-glow:  rgba(34, 196, 116, 0.20);

  --warning:       #f5a623;
  --warning-light: #ffc044;
  --warning-soft:  rgba(245, 166, 35, 0.12);
  --warning-glow:  rgba(245, 166, 35, 0.20);

  --danger:        #f14a4a;
  --danger-light:  #ff6b6b;
  --danger-soft:   rgba(241, 74, 74, 0.12);
  --danger-glow:   rgba(241, 74, 74, 0.22);

  --info:          #38b2f5;
  --info-soft:     rgba(56, 178, 245, 0.12);

  /* ─────────────────────────────────────────────
   * TIPOGRAFIA — TEXTO
   * ───────────────────────────────────────────── */

  --text-primary:  #eef1fd;   /* Leitura principal — frio levíssimo */
  --text-secondary: rgba(214, 222, 250, 0.72); /* Subtítulos, labels */
  --text-muted:    rgba(180, 192, 230, 0.52);  /* Placeholders, meta */
  --text-disabled: rgba(155, 166, 200, 0.32);  /* Desabilitado */
  --text-inverse:  #0b0f1a;   /* Sobre fundos claros/brand */
  --text-accent:   #7fa3ff;   /* Highlight de texto */
  --text-success:  #22c474;
  --text-warning:  #f5a623;
  --text-danger:   #f14a4a;

  /* ─────────────────────────────────────────────
   * BORDAS E LINHAS
   * ───────────────────────────────────────────── */

  --border:        rgba(255, 255, 255, 0.07);  /* Default */
  --border-light:  rgba(255, 255, 255, 0.04);  /* Sutil */
  --border-medium: rgba(255, 255, 255, 0.10);  /* Mais visível */
  --border-strong: rgba(255, 255, 255, 0.16);  /* Hover / focus */
  --border-accent: rgba(79, 124, 255, 0.26);   /* Accent border */
  --border-brand:  rgba(33, 48, 112, 0.40);    /* Brand border */
  --border-glow:   rgba(79, 124, 255, 0.40);   /* Focus ring */
  --border-success: rgba(34, 196, 116, 0.24);
  --border-danger:  rgba(241, 74, 74, 0.24);
  --border-warning: rgba(245, 166, 35, 0.22);

  /* ─────────────────────────────────────────────
   * TIPOGRAFIA — FAMÍLIAS E ESCALAS
   * ───────────────────────────────────────────── */

  --font-sans:    'Inter', 'Geist', system-ui, -apple-system, sans-serif;
  --font-display: 'Sora', 'Outfit', var(--font-sans);
  --font-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;

  /* Escala tipográfica — Minor Third (1.2) */
  --text-2xs: 0.64rem;    /* 9px  — eyebrow, labels */
  --text-xs:  0.75rem;    /* 10.5px */
  --text-sm:  0.825rem;   /* 11.5px */
  --text-base: 0.9375rem; /* 13px — base */
  --text-md:  1rem;       /* 14px */
  --text-lg:  1.125rem;   /* 15.7px */
  --text-xl:  1.25rem;    /* 17.5px */
  --text-2xl: 1.5rem;     /* 21px */
  --text-3xl: 1.875rem;   /* 26px */
  --text-4xl: 2.25rem;    /* 31.5px */
  --text-5xl: 2.75rem;    /* 38.5px */

  /* Font weights */
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* Line heights */
  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-base:   1.5;
  --lh-relaxed: 1.65;

  /* Letter spacing */
  --ls-tight:  -0.04em;
  --ls-snug:   -0.025em;
  --ls-normal: -0.01em;
  --ls-wide:   0.04em;
  --ls-wider:  0.08em;
  --ls-widest: 0.14em;

  /* ─────────────────────────────────────────────
   * ESPAÇAMENTO — ESCALA 4px
   * ───────────────────────────────────────────── */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ─────────────────────────────────────────────
   * BORDER RADIUS
   * ───────────────────────────────────────────── */

  --radius-2xs: 4px;
  --radius-xs:  6px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-full: 9999px;

  /* ─────────────────────────────────────────────
   * SOMBRAS — COM PROFUNDIDADE E GLOW
   * ───────────────────────────────────────────── */

  /* Sombras base (escuro, difuso) */
  --shadow-xs:   0 1px 3px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-sm:   0 4px 12px rgba(0, 0, 0, 0.30), 0 2px 6px rgba(0, 0, 0, 0.22);
  --shadow-md:   0 10px 28px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.24);
  --shadow-lg:   0 20px 48px rgba(0, 0, 0, 0.42), 0 8px 20px rgba(0, 0, 0, 0.28);
  --shadow-xl:   0 32px 72px rgba(0, 0, 0, 0.55), 0 12px 32px rgba(0, 0, 0, 0.32);
  --shadow-2xl:  0 48px 96px rgba(0, 0, 0, 0.65), 0 20px 48px rgba(0, 0, 0, 0.40);

  /* Sombras com glow do accent */
  --shadow-glow-sm:  0 0 0 1px var(--border-accent), 0 4px 20px var(--accent-glow);
  --shadow-glow-md:  0 0 0 1px var(--border-accent), 0 8px 32px var(--accent-glow), 0 2px 8px rgba(0,0,0,0.3);
  --shadow-glow-lg:  0 0 0 1px var(--border-accent), 0 16px 48px var(--accent-glow), 0 4px 16px rgba(0,0,0,0.4);

  /* Glow de foco (brand) */
  --shadow-focus: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--border-accent);

  /* Inner shadows */
  --inset-top:   inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --inset-glow:  inset 0 0 24px rgba(79, 124, 255, 0.06);

  /* ─────────────────────────────────────────────
   * LAYOUT — ESTRUTURA PRINCIPAL
   * ───────────────────────────────────────────── */

  --sidebar-width:  268px;
  --topbar-height:  60px;
  --content-max:    1280px;
  --content-pad:    28px;
  --content-pad-sm: 20px;

  /* ─────────────────────────────────────────────
   * TRANSIÇÕES — CURVAS E DURAÇÕES
   * ───────────────────────────────────────────── */

  /* Easings */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snappy:   cubic-bezier(0.35, 0, 0.15, 1);

  /* Durações */
  --dur-instant: 80ms;
  --dur-fast:    140ms;
  --dur-normal:  200ms;
  --dur-slow:    320ms;
  --dur-slower:  480ms;

  /* Transição padrão composta */
  --transition:       var(--dur-normal) var(--ease-smooth);
  --transition-fast:  var(--dur-fast) var(--ease-out);
  --transition-slow:  var(--dur-slow) var(--ease-smooth);

  /* ─────────────────────────────────────────────
   * Z-INDEX — CAMADAS DE PROFUNDIDADE
   * ───────────────────────────────────────────── */

  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  30;
  --z-sticky:    40;
  --z-fixed:     50;
  --z-overlay:   60;
  --z-modal:     70;
  --z-popover:   80;
  --z-toast:     90;
  --z-tooltip:   100;

  /* ─────────────────────────────────────────────
   * GRADIENTES PREDEFINIDOS
   * ───────────────────────────────────────────── */

  /* Fundo geral com radials de profundidade */
  --gradient-bg:
    radial-gradient(ellipse 80% 50% at 10% -10%, rgba(33, 48, 112, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 5%, rgba(79, 124, 255, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(11, 15, 26, 0.80) 0%, transparent 100%),
    var(--bg-base);

  /* Gradiente do brand azul */
  --gradient-brand:  linear-gradient(135deg, var(--brand-bright) 0%, var(--brand) 100%);
  --gradient-brand-v: linear-gradient(180deg, var(--brand-bright) 0%, var(--brand) 100%);

  /* Gradientes de accent */
  --gradient-accent: linear-gradient(135deg, #6b95ff 0%, var(--accent) 50%, #3451b2 100%);
  --gradient-accent-h: linear-gradient(90deg, var(--accent-light) 0%, var(--accent) 100%);

  /* Gradiente shine para botões primary */
  --gradient-btn-primary:
    linear-gradient(135deg, #6b95ff 0%, #4f7cff 40%, #3451b2 100%);

  /* Surface glass gradient */
  --gradient-surface:
    linear-gradient(180deg, rgba(19, 24, 40, 0.86) 0%, rgba(13, 17, 30, 0.90) 100%);

  /* Separator line */
  --gradient-separator:
    linear-gradient(90deg, transparent 0%, var(--border-medium) 20%, var(--border-medium) 80%, transparent 100%);
}