/* ==========================================================================
   ORBELO — Design tokens
   Ponto único de verdade da identidade visual.

   O site é CLARO por padrão. O tema escuro continua disponível e completo:
   basta <html data-theme="dark">. Os dois compartilham exatamente os mesmos
   tokens semânticos, então nenhum componente precisa saber em qual tema está.
   ========================================================================== */

:root {
  /* ======================================================================
     1. Cor de destaque — extraída da logo oficial
     Roxo ORBELO = #6F50C0 — rgb(111 80 192).
     É a ÚNICA cor do site fora da escala de cinzas.
     Para reposicionar toda a identidade, altere apenas esta linha.
     ====================================================================== */
  --accent-rgb:      111 80 192;   /* #6F50C0 — cor da logo */
  --accent-lift-rgb: 163 139 246;  /* #A38BF6 — versão luminosa, p/ fundo escuro */

  --accent:      rgb(var(--accent-rgb));
  --accent-lift: rgb(var(--accent-lift-rgb));
  --accent-08:   rgb(var(--accent-rgb) / .06);
  --accent-14:   rgb(var(--accent-rgb) / .11);
  --accent-24:   rgb(var(--accent-rgb) / .20);
  --accent-45:   rgb(var(--accent-rgb) / .45);

  /* ======================================================================
     2. Tema claro (padrão)
     ====================================================================== */
  --bg:          #ffffff;
  --bg-raised:   #f5f5f6;
  --bg-elevated: #fafafa;

  --text:        #101013;
  --text-2:      rgb(16 16 19 / .74);
  --text-3:      rgb(16 16 19 / .60);   /* mínimo para 4.5:1 sobre branco */

  --line:        rgb(16 16 19 / .11);
  --line-strong: rgb(16 16 19 / .22);

  /* Texto/traço em cima do roxo, e roxo usado como texto */
  --on-accent:   #ffffff;
  --accent-text: var(--accent);         /* 5.9:1 sobre branco — AA */
  --accent-glow: rgb(var(--accent-rgb) / .26);

  /* Elementos atmosféricos */
  --veil-rgb:    255 255 255;           /* cor dos scrims sobre o fundo */
  --ring:        rgb(16 16 19 / .10);   /* traço dos anéis orbitais */
  --ring-faint:  rgb(16 16 19 / .055);
  --grid-line:   rgb(16 16 19 / .055);  /* grid técnico do hero */
  --hatch:       rgb(16 16 19 / .035);  /* hachura dos placeholders */

  --nav-bg:      rgb(255 255 255 / .72);
  --grain-display: none;          /* grão só faz sentido no tema escuro */
  --grain-blend: multiply;
  --grain-op:    .10;
  --orb-glow-1:  .16;             /* halo do sistema orbital do hero */
  --orb-glow-2:  .04;

  --cursor-blend: normal;
  --cursor-dot:   #101013;
  --cursor-ring:  rgb(16 16 19 / .40);
  --cursor-ring-strong: #101013;

  /* ======================================================================
     3. Tipografia
     ====================================================================== */
  --font-display: "Inter Tight", "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Escala fluida — 320px → 1920px */
  --fs-hero:     clamp(2.75rem, min(9.2vw, 13.4vh), 9rem);
  --fs-display:  clamp(2.25rem, min(6.6vw, 11vh), 6.5rem);
  --fs-title:    clamp(2rem, 4.6vw, 4.4rem);
  --fs-h3:       clamp(1.25rem, 2vw, 1.75rem);
  --fs-lead:     clamp(1rem, 1.35vw, 1.3125rem);
  --fs-body:     clamp(0.9375rem, 1.05vw, 1.0625rem);
  --fs-small:    0.8125rem;
  --fs-label:    0.6875rem;

  --lh-tight: 0.92;
  --lh-snug:  1.06;
  --lh-text:  1.62;

  --tr-tight: -0.045em;
  --tr-snug:  -0.028em;
  --tr-label:  0.18em;

  /* ======================================================================
     4. Layout
     ====================================================================== */
  --gutter:    clamp(20px, 5.2vw, 88px);
  --maxw:      1600px;
  --section-y: clamp(96px, 14vh, 200px);
  --radius:    2px;
  --radius-lg: 4px;
  --nav-h:     76px;

  /* ======================================================================
     5. Motion
     ====================================================================== */
  --e-out:   cubic-bezier(.16, 1, .3, 1);
  --e-inout: cubic-bezier(.62, .05, .28, 1);
  --e-soft:  cubic-bezier(.33, 1, .68, 1);

  --d-xs: .18s;
  --d-sm: .34s;
  --d-md: .62s;
  --d-lg: 1s;
  --d-xl: 1.5s;
}

/* ==========================================================================
   Tema escuro — opcional, completo.
   Ative com <html data-theme="dark">.
   A seção "Diferencial" usa esta mesma paleta de forma local (ver .pause),
   criando a pausa cinematográfica no meio do site claro.
   ========================================================================== */
:root[data-theme="dark"],
.theme-dark {
  --bg:          #050505;
  --bg-raised:   #0a0a0b;
  --bg-elevated: #101012;

  --text:        #f4f4f6;
  --text-2:      rgb(244 244 246 / .66);
  --text-3:      rgb(244 244 246 / .50);

  --line:        rgb(255 255 255 / .09);
  --line-strong: rgb(255 255 255 / .18);

  --on-accent:   #ffffff;
  --accent-text: var(--accent-lift);    /* 7.3:1 sobre #050505 */
  --accent-glow: rgb(var(--accent-rgb) / .34);

  --accent-08:   rgb(var(--accent-rgb) / .08);
  --accent-14:   rgb(var(--accent-rgb) / .14);
  --accent-24:   rgb(var(--accent-rgb) / .24);

  --veil-rgb:    5 5 5;
  --ring:        rgb(255 255 255 / .09);
  --ring-faint:  rgb(255 255 255 / .045);
  --grid-line:   rgb(255 255 255 / .055);
  --hatch:       rgb(255 255 255 / .022);

  --nav-bg:      rgb(5 5 5 / .62);
  --grain-display: block;
  --grain-blend: overlay;
  --grain-op:    .30;
  --orb-glow-1:  .30;
  --orb-glow-2:  .06;

  --cursor-blend: difference;
  --cursor-dot:   #ffffff;
  --cursor-ring:  rgb(255 255 255 / .55);
  --cursor-ring-strong: #ffffff;
}

@media (max-width: 767px) {
  :root { --nav-h: 64px; }
}