/* ==========================================================================
   Programe Studio · tokens · v1.1
   Fonte: Figma "Ely - Programe Studio (Cliente)", página CLAUDE
   (Design system · 1440, Componentes · 1440, Programe Studio - Desktop/Mobile)

   Três camadas:
   1. Primitivos   valores crus da marca (--ink-*, --gold-*, --space-*)
   2. Semânticos   papel na interface (--surface-1, --text-primary, --brand)
   3. Componente   em components.css, sempre lendo os semânticos

   Tema: a página é escura por padrão. Seções claras recebem .theme-light
   (ou data-theme="light") e todos os semânticos se invertem dentro dela.

   Regra do amarelo: --brand é ação (botão, foco, o que se clica).
   --marker é sinalização (número de seção, palavra marcada, filete).
   Um destaque por região: dois dourados na mesma área e nenhum puxa o olho.
   ========================================================================== */

:root {
  /* ======================================================================
     1. PRIMITIVOS
     ====================================================================== */

  /* Tinta: base escura, matiz neutro frio */
  --ink-1000: #050507;
  --ink-950: #07070a;
  --ink-900: #0b0b0f;
  --ink-850: #0d0d10; /* card da LP (Figma usava #0D0D0D, #0E0E0E, #0C0C0C) */
  --ink-800: #131317;
  --ink-700: #1a1a1f;
  --ink-600: #22222a;
  --ink-500: #45454e;
  --ink-450: #63636c; /* terciário no claro: 5:1 sobre porcelana */
  --ink-400: #6c6c76;
  --ink-300: #8a8a94;
  --ink-200: #a8a8b0;
  --ink-50: #f6f6f5;

  /* Porcelana: neutros levemente quentes, para não brigar com o amarelo */
  --porcelain-0: #ffffff;
  --porcelain-50: #fafaf8;
  --porcelain-100: #f4f4f2; /* fundo das seções claras (Figma: #F3F3F1) */
  --porcelain-150: #ededea;
  --porcelain-200: #e2e2dd;
  --porcelain-300: #cfcfc8;

  /* Dourado: a marca */
  --gold-50: #fffceb;
  --gold-100: #fff6c2;
  --gold-200: #fff0a8;
  --gold-300: #ffe571;
  --gold-400: #ffdd3d;
  --gold-500: #ffd700;
  --gold-600: #e6c200;
  --gold-650: #e9b900;
  --gold-700: #cc9a00;
  --gold-800: #9c7400;
  --gold-900: #6b4f00;
  --gold-ink: #17130a; /* texto e ícone sobre dourado */
  --gold-deep: #1c1800; /* card de destaque no escuro */

  /* Acentos e estados: âmbar acompanha, gelo separa dado, estado avisa.
     Só dentro de mockups de produto, nunca no texto da LP. */
  --ember-400: #f59e0b;
  --ember-500: #d97706;
  --frost-200: #cfe0ff;
  --frost-400: #6b9fff;
  --success-400: #3fcf8e;
  --success-500: #137a4c;
  --danger-400: #f0564a;
  --danger-500: #c4362d;

  /* Tipografia
     Uma família só, a do sistema: San Francisco em Mac e iPhone, sem
     hospedar arquivo. Inter entra só onde SF não existe (Windows, Android);
     o navegador só baixa a fonte quando precisa dela. */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-heavy: 800;

  /* Espaço: grade de 4. Card respira 24, painel interno 16, colunas 16 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Raio: interno = externo - respiro. shell 32 · card 24 · painel 18 · tile 14 */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* Motion: acima de 300ms a interface parece lenta. Curva sempre saindo:
     ease-in atrasa o primeiro quadro, que é justo o que a pessoa olha. */
  --dur-press: 120ms;
  --dur-switch: 200ms;
  --dur-enter: 420ms;
  --stagger: 60ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* Strokes, bisel e elevação
     Toda borda de superfície é box-shadow inset, nunca border: não mexe no
     box model e chega no Figma como inside stroke. Exceções: tracejado e
     moldura de tabela. O bisel (luz no topo, peso na base) vem em todo card,
     botão e elipse de ícone: é ele que separa uma caixa de um retângulo. */
  --stroke-in-light: inset 0 0 0 1px rgb(18 15 10 / 0.07);
  --stroke-in-dark: inset 0 0 0 1px rgb(255 255 255 / 0.08);
  --hl-top-light: inset 0 1px 0 rgb(255 255 255 / 0.9);
  --hl-top-dark: inset 0 1px 0 rgb(255 255 255 / 0.14);
  --shade-bottom: inset 0 -1px 0 rgb(0 0 0 / 0.35);
  --well: inset 0 1px 2px rgb(18 15 10 / 0.09);
  --bevel-top: inset 0 1px 0 rgb(255 255 255 / 0.95);
  --bevel-base: inset 0 -1.5px 0 rgb(64 48 12 / 0.07);

  --elev-0: 0 1px 2px rgb(28 22 8 / 0.08);
  --elev-1: 0 1px 2px rgb(28 22 8 / 0.06), 0 2px 8px rgb(28 22 8 / 0.05);
  --elev-2: 0 12px 32px -16px rgb(28 22 8 / 0.24);
  --elev-3: 0 24px 56px -24px rgb(28 22 8 / 0.34);
  --glow-brand: 0 10px 26px -14px rgb(255 199 0 / 0.42);

  /* Composições do produto (superfícies claras do app, mockups) */
  --fx-card: var(--bevel-top), var(--bevel-base), var(--stroke-in-light), var(--elev-1);
  --fx-card-float: var(--bevel-top), var(--bevel-base), var(--stroke-in-light), var(--elev-2);
  --fx-orb: var(--bevel-top), var(--bevel-base), var(--stroke-in-light), var(--elev-0);
  --fx-bevel-sunk: var(--well), var(--bevel-base), var(--stroke-in-light);

  /* Gradientes: cinco assinaturas */
  --gradient-brand: linear-gradient(180deg, var(--gold-300) 0%, var(--gold-500) 46%, var(--gold-650) 100%);
  --gradient-marker: linear-gradient(90deg, var(--gold-500) 0%, #fff5c0 100%);
  --gradient-highlight: linear-gradient(100deg, var(--gold-100) 0%, var(--gold-400) 45%, var(--gold-700) 100%);
  --gradient-forge:
    radial-gradient(120% 92% at 6% 0%, rgb(255 215 0 / 0.26), transparent 58%),
    radial-gradient(90% 70% at 96% 8%, rgb(245 158 11 / 0.14), transparent 62%),
    linear-gradient(174deg, var(--ink-600) 8%, #0f0f14 57%, var(--ink-950) 92%);
  --gradient-glow-radial: radial-gradient(120% 92% at 10% 0%, rgb(255 215 0 / 0.3), transparent 62%);

  /* Hachura: sólido é realizado, hachurado é previsto. Nunca textura.
     Se aparecer em algo já realizado, a tela passa a mentir. */
  --hatch-build: repeating-linear-gradient(135deg, var(--gold-500) 0 1.5px, var(--gold-50) 1.5px 4.25px);
  --hatch-neutral: repeating-linear-gradient(135deg, var(--porcelain-300) 0 1.5px, var(--porcelain-100) 1.5px 4.25px);
  --hatch-frost: repeating-linear-gradient(135deg, var(--frost-400) 0 1.5px, var(--frost-200) 1.5px 4.25px);

  /* Layout */
  --container: 1136px;
  --container-wide: 1360px;
  --gutter: clamp(20px, 4vw, 40px);
  --section-y: clamp(72px, 5vw + 48px, 128px);
  --measure: 62ch;
}

/* ======================================================================
   2. SEMÂNTICOS · ESCURO (padrão)
   .theme-dark devolve o escuro dentro de uma seção clara: o card
   "operação" da Vitrine, o prompt no hero.
   ====================================================================== */
:root,
.theme-dark,
[data-theme="dark"] {
  color-scheme: dark;

  --bg-page: var(--ink-950);
  --bg-alt: var(--ink-900);
  --bg-deep: var(--ink-1000);

  --surface-1: var(--ink-850); /* card */
  --surface-2: rgb(255 255 255 / 0.03); /* tile e campo dentro do card */
  --surface-3: rgb(255 255 255 / 0.05); /* controle, botão fantasma */
  --surface-raised: var(--ink-800); /* navbar, popover */
  --surface-inverse: var(--porcelain-0);
  --surface-accent: var(--gold-deep); /* card em destaque */

  --text-primary: var(--ink-50);
  --text-secondary: var(--ink-200);
  --text-tertiary: var(--ink-300); /* eyebrow, meta, legenda */
  --text-muted: var(--ink-400); /* só placeholder e desativado: abaixo de 4,5:1 */
  --text-inverse: var(--ink-950);
  --text-accent: var(--gold-200);

  --border-subtle: rgb(255 255 255 / 0.08);
  --border-divider: rgb(255 255 255 / 0.1);
  --border-strong: rgb(255 255 255 / 0.14);
  --border-dashed: rgb(255 255 255 / 0.16);

  --brand: var(--gold-500);
  --brand-fill: var(--gradient-brand);
  --on-brand: var(--gold-ink);
  --focus-ring: var(--gold-500);

  --marker: var(--gold-500);
  --marker-text: var(--gradient-marker);
  --highlight-text: var(--gradient-highlight); /* palavra-chave do título */
  --marker-tint: rgb(255 215 0 / 0.07);
  --marker-line: rgb(255 215 0 / 0.4);
  --text-marker: var(--gold-500); /* número de passo, pergunta aberta */
  --icon-accent: var(--gold-500);
  --icon-on-inverse: var(--gold-700);
  --divider-track: #15140d;
  --grid-line: rgb(255 255 255 / 0.055);
  --hatch-pending: repeating-linear-gradient(135deg, rgb(255 215 0 / 0.45) 0 1.5px, transparent 1.5px 4.25px);

  --success-text: var(--success-400);
  --success-tint: rgb(63 207 142 / 0.12);
  --warning-text: var(--gold-500);
  --warning-tint: rgb(255 215 0 / 0.1);
  --danger-text: var(--danger-400);
  --danger-tint: rgb(240 86 74 / 0.12);

  --fx-surface: var(--stroke-in-dark), inset 0 1px 0 rgb(255 255 255 / 0.06),
    0 1px 3px rgb(0 0 0 / 0.6), 0 16px 40px -12px rgb(0 0 0 / 0.9);
  --fx-surface-float: var(--stroke-in-dark), inset 0 1px 0 rgb(255 255 255 / 0.08),
    inset 0 -1px 0 rgb(0 0 0 / 0.55), 0 2px 4px rgb(0 0 0 / 0.7), 0 28px 64px -24px rgb(0 0 0 / 0.95);
  --fx-tile: inset 0 0 0 1px rgb(255 255 255 / 0.09);
  --fx-control: inset 0 1px 0 rgb(255 255 255 / 0.09), var(--stroke-in-dark);
  --fx-field: inset 0 1px 2px rgb(0 0 0 / 0.4), var(--stroke-in-dark);
  --fx-accent: inset 0 0 0 1px rgb(255 215 0 / 0.35), inset 0 1px 0 rgb(255 255 255 / 0.06);
}

/* ======================================================================
   2. SEMÂNTICOS · CLARO (seção)
   ====================================================================== */
.theme-light,
[data-theme="light"] {
  color-scheme: light;

  --bg-page: var(--porcelain-100);
  --bg-alt: var(--porcelain-50);
  --bg-deep: var(--porcelain-150);

  --surface-1: var(--porcelain-0);
  --surface-2: var(--porcelain-50);
  --surface-3: var(--porcelain-150);
  --surface-raised: var(--porcelain-0);
  --surface-inverse: var(--ink-950);
  --surface-accent: var(--gold-50);

  --text-primary: var(--ink-950);
  --text-secondary: var(--ink-500);
  --text-tertiary: var(--ink-450);
  --text-muted: var(--ink-300);
  --text-inverse: var(--ink-50);
  --text-accent: var(--gold-900);

  --border-subtle: rgb(10 10 10 / 0.08);
  --border-divider: rgb(10 10 10 / 0.1);
  --border-strong: var(--porcelain-300);
  --border-dashed: rgb(10 10 10 / 0.18);

  --focus-ring: var(--gold-700);

  /* No claro a palavra marcada fica em tinta: amarelo em texto sobre
     porcelana fica em 1,3:1. */
  --marker-text: linear-gradient(var(--ink-950), var(--ink-950));
  /* A palavra-chave fica no amarelo mais fechado da escala (600 ao 700):
     ainda lê como amarelo, sem cair no ouro amarronzado. */
  --highlight-text: linear-gradient(100deg, var(--gold-600) 0%, var(--gold-650) 50%, var(--gold-700) 100%);
  --marker-tint: rgb(255 215 0 / 0.18);
  --marker-line: var(--gold-700);
  --text-marker: var(--gold-900);
  --icon-accent: var(--gold-800);
  --icon-on-inverse: var(--gold-500);
  --divider-track: var(--porcelain-200);
  --grid-line: rgb(10 10 10 / 0.055);
  --hatch-pending: var(--hatch-build);

  --success-text: var(--success-500);
  --success-tint: #e4f6ec;
  --warning-text: var(--gold-900);
  --warning-tint: var(--gold-100);
  --danger-text: var(--danger-500);
  --danger-tint: #fdeceb;

  --fx-surface: var(--bevel-top), var(--stroke-in-light),
    0 1px 2px -1px rgb(10 10 10 / 0.12), 0 22px 48px -28px rgb(10 10 10 / 0.35);
  --fx-surface-float: var(--bevel-top), var(--bevel-base), var(--stroke-in-light), var(--elev-3);
  --fx-tile: var(--stroke-in-light);
  --fx-control: var(--bevel-top), var(--bevel-base), var(--stroke-in-light), var(--elev-1);
  --fx-field: var(--well), var(--stroke-in-light);
  --fx-accent: inset 0 0 0 1px rgb(204 154 0 / 0.35), var(--bevel-top);
}