/*
  Camada MARCA — Caiotti.Studio · Organic Futurism (Olive) CANÔNICO
  Carregada DEPOIS de tokens.css (a base).

  Único design system da Caiotti.Studio (2026-08-11).
  Identidade: olive + cyan, zinc na rampa e na superfície light. Famílias de tipo em
  `../typography/fonts.json` — `npm run fonts:vendor` grava os --primitive-font-*.
*/

:root {
  /* BEGIN fonts.json */
  /* GERADO por scripts/vendor_fonts.mjs a partir de fonts.json — não editar à mão. */
  --primitive-font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, ui-sans-serif, system-ui, sans-serif;
  --primitive-font-ui: "Instrument Sans", -apple-system, BlinkMacSystemFont, ui-sans-serif, system-ui, sans-serif;
  --primitive-font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --primitive-font-display-condensed: "Barlow Condensed", "Arial Narrow", "Helvetica Condensed", sans-serif;
  --primitive-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
  --ds-font-display-condensed: var(--primitive-font-display-condensed);
  /* END fonts.json */
  /* ═══════════════════════════════════════════════
     Tipografia da marca — papéis, não famílias.
     ═══════════════════════════════════════════════ */
  --ds-type-display: var(--ds-weight-regular) var(--ds-text-display)/var(--ds-leading-none) var(--ds-font-display);
  --ds-type-display-condensed: var(--ds-weight-semibold) var(--ds-text-display)/var(--ds-leading-none) var(--ds-font-display-condensed);
  --ds-track-display: -0.03em;
  --ds-track-display-condensed: 0.02em;

  /* Tracking: a escala inteira mora em `tokens.css`, por PAPEL. A marca só
     redefine display, logo acima. Motivo de estar num arquivo só: metade aqui e
     metade lá fazia quem lesse um deles concluir errado — aconteceu em
     2026-09-10. Negativo fecha buraco que só aparece em corpo grande; em texto
     pequeno ele cola letra, e a marca é dark-first (texto claro sobre fundo
     escuro floresce e parece mais apertado do que é). Instrument Sans tem
     x-height alto e métrica aberta: apertar corpo e chrome nela é trabalhar
     contra a fonte. */
  --ds-type-eyebrow: var(--ds-weight-bold) var(--ds-text-xs)/var(--ds-leading-snug) var(--ds-font-mono);
  --ds-type-body: var(--ds-weight-regular) var(--ds-text-md)/var(--ds-leading-body) var(--ds-font-body);
  --ds-type-body-medium: var(--ds-weight-medium) var(--ds-text-md)/var(--ds-leading-body) var(--ds-font-body);
  --ds-type-label: var(--ds-weight-medium) var(--ds-text-sm)/var(--ds-leading-snug) var(--ds-font-ui);

  /* ═══════════════════════════════════════════════
     Assinatura cromática — Olive / Cyan
     (slots RGB do v2 reusados: red≈olive, green≈olive-400, blue≈cyan)

     Moss e Ice foram aposentados em 2026-09-10 por decisão do Caio: o valor de
     cada um já vivia na rampa (Moss = olive-400; o papel de detalhe do Ice, nos
     degraus claros do cyan), e cor com nome próprio que duplica um degrau vira
     dois lugares pra lembrar. O VALOR do Moss continua — só o nome saiu.
     ═══════════════════════════════════════════════ */
  --primitive-olive: #a8c07a;
  --primitive-cyan: #5fced4;
  --primitive-sage: #6bbf8c;
  --primitive-amber: #d4a44c;
  --primitive-rose: #ef6e8a;
  --primitive-olive-dim: #7a8f52;
  /* Pares de tema aprovados 2026-09-18 (Molde Spec 03 ab_color_theme_pairs):
     um degrau por tema; AA no papel de cada tema. Olive dark e Cyan dark
     inalterados; Olive light #4a6529→#556b2f, Cyan light #1a6b74→#0e7490. */
  --primitive-olive-on-light: #556b2f;
  --primitive-cyan-on-light: #0e7490;

  --primitive-olive-on-dark: #a8c07a;
  --primitive-cyan-on-dark: #5fced4;

  /* ── Rampas de marca — Olive e Cyan ──────────────────────────────
     Mesma convenção numérica do zinc, mas só os degraus que têm trabalho
     (50→700). Passo perceptual construído em OKLCH: hue e chroma da marca
     travados, lightness em degraus regulares.

     300, 400 e 600 NÃO são valores novos — apontam pros primitivos que já
     existiam, então a rampa nomeia POSIÇÃO sem duplicar hex:
       olive-300 = a cor da marca · olive-400 = variação orgânica · olive-600 = accent light
       cyan-300  = o sinal da marca                       · cyan-600  = sinal light
     Texto pequeno só nos degraus 600 (superfície clara) e 300 (superfície
     escura). O resto é preenchimento — regra 1 do contrast.md. */
  --primitive-olive-50: #f2f7e9;
  --primitive-olive-100: #dfe9ce;
  --primitive-olive-200: #c7d7a6;
  --primitive-olive-300: var(--primitive-olive);
  --primitive-olive-400: #7fa05f;   /* o antigo Moss mora aqui agora */
  --primitive-olive-500: #648344;
  --primitive-olive-600: var(--primitive-olive-on-light);
  --primitive-olive-700: #324919;

  --primitive-cyan-50: #e9f8f9;
  --primitive-cyan-100: #caecef;
  --primitive-cyan-200: #9cdde1;
  --primitive-cyan-300: var(--primitive-cyan);
  --primitive-cyan-400: #43a9b1;
  --primitive-cyan-500: #2b8992;
  --primitive-cyan-600: var(--primitive-cyan-on-light);
  --primitive-cyan-700: #0d4e56;

  /* ── Complemento — Indigo (2026-09-10) ───────────────────────────
     Único hue novo. Em OKLCH a marca ocupa 9 (rose), 80 (amber), 124 (olive),
     131 (olive-400), 156 (sage) e 200 (cyan): o arco 219→369 estava
     inteiro vazio. Indigo entra em H278, no meio desse vão, com chroma 0.10 —
     o mesmo registro do olive (0.097) e do cyan (0.101), pra ser PAR e nunca
     concorrente. Papel: categoria e profundidade (série de dado, tag, ênfase
     silenciosa). Nunca CTA, nunca em gradiente com cyan. */
  --primitive-indigo: #8a92d6;
  --primitive-indigo-on-dark: #8a92d6;
  --primitive-indigo-on-light: #4c519c;

  /* ── Pares de tema — Suporte (2026-09-18) ─────────────────────────
     Lock total CANDIDATE→lock, AA verificado na folha de cada tema.
     Dark --ds-ok/--ds-warn/--ds-danger continuam nos primitivos base
     (render dark idêntico); o bloco light aponta pros degraus on-light. */
  --primitive-sage-on-dark: #a9bfa0;
  --primitive-sage-on-light: #4d6b4f;
  --primitive-amber-on-dark: #e5b84c;
  --primitive-amber-on-light: #92610f;
  --primitive-rose-on-dark: #e5a3ab;
  --primitive-rose-on-light: #a63a4a;

  /* Aliases legados dos slots red/green/blue (glass, swatches, hero) */
  --primitive-red: var(--primitive-olive);
  --primitive-green: var(--primitive-olive-400);
  --primitive-blue: var(--primitive-cyan);
  --primitive-red-on-light: var(--primitive-olive-on-light);
  --primitive-green-on-light: #3f5a24;
  --primitive-blue-on-light: var(--primitive-cyan-on-light);
  --primitive-red-on-dark: var(--primitive-olive-on-dark);
  --primitive-green-on-dark: var(--primitive-olive-400);
  --primitive-blue-on-dark: var(--primitive-cyan-on-dark);

  --primitive-gradient-rgb: linear-gradient(
    120deg,
    var(--primitive-olive) 0%,
    var(--primitive-olive-400) 45%,
    var(--primitive-cyan) 100%
  );
  --primitive-gradient-rgb-stroke: conic-gradient(
    from 210deg,
    var(--primitive-olive) 0deg,
    var(--primitive-olive-400) 120deg,
    var(--primitive-cyan) 240deg,
    var(--primitive-olive) 360deg
  );

  /* ── Neutros quentes (dark) — sobrescreve a base fria do v2 ── */
  --ds-bg-0: #0f0f10;
  --ds-bg-1: #17171a;
  --ds-bg-2: #242427;
  --ds-bg-hover: #2c2c30;
  --ds-bg-inverse: #f5f4f0;
  --ds-bg-sunken: #0a0a0b;

  --ds-text-0: #f5f4f0;
  --ds-text-1: #c8c6c0;
  --ds-text-2: #92918b;
  --ds-text-inverse: #10110e;

  --ds-border-subtle: rgba(255, 255, 255, 0.06);
  --ds-border-default: rgba(255, 255, 255, 0.1);
  --ds-border-emphasis: rgba(255, 255, 255, 0.18);

  /* Accent = olive (CTA, active, brand anchor) */
  --ds-accent: var(--primitive-olive);
  --ds-accent-contrast: #10110e;
  --ds-accent-muted: rgba(168, 192, 122, 0.12);
  --ds-focus-ring: rgba(168, 192, 122, 0.45);

  --ds-signal-red: var(--primitive-olive-on-dark);
  --ds-signal-green: var(--primitive-olive-400);
  --ds-signal-blue: var(--primitive-cyan-on-dark);
  --ds-signal-indigo: var(--primitive-indigo-on-dark);

  --ds-brand-red: var(--primitive-olive);
  --ds-brand-green: var(--primitive-olive-400);
  --ds-brand-blue: var(--primitive-cyan);

  --ds-gradient-rgb: var(--primitive-gradient-rgb);
  --ds-gradient-brand: var(--primitive-gradient-rgb);
  --ds-gradient-spectrum: var(--primitive-gradient-rgb-stroke);

  --ds-ok: var(--primitive-sage);
  --ds-warn: var(--primitive-amber);
  --ds-danger: var(--primitive-rose);

  --ds-shadow-sm: 0 8px 18px -14px rgba(0, 0, 0, 0.42);
  --ds-shadow-md: 0 18px 34px -18px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--ds-border-subtle);
  --ds-shadow-lg: 0 30px 60px -28px rgba(0, 0, 0, 0.62), 0 18px 28px -24px rgba(168, 192, 122, 0.18);

  /* Radius Organic Futurism (ligeiramente mais aberto no card) */
  --ds-radius-sm: 4px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 14px;
  --ds-radius-xl: 20px;

}

/* LIGHT theme — zinc surfaces + olive AA-safe (CTA e texto no botão ≥ 4.5:1)
   Selectors: attr data-theme + class .theme-light (applyTheme seta os dois).
   Cream paper (#f4f1ea / #fcfaf4) saiu em 2026-09-14: light usa a rampa zinc. */
html[data-theme="light"],
:root[data-theme="light"],
html.theme-light,
:root.theme-light {
  color-scheme: light;

  --ds-bg-0: var(--primitive-zinc-100);
  --ds-bg-1: var(--primitive-zinc-50);
  --ds-bg-2: var(--primitive-zinc-200);
  --ds-bg-hover: var(--primitive-zinc-300);
  --ds-bg-inverse: var(--primitive-zinc-900);
  --ds-bg-sunken: #ececee;

  --ds-text-0: var(--primitive-zinc-900);
  --ds-text-1: var(--primitive-zinc-700);
  --ds-text-2: var(--primitive-zinc-600);
  --ds-text-inverse: var(--primitive-zinc-50);

  --ds-border-subtle: color-mix(in srgb, var(--primitive-zinc-900) 8%, transparent);
  --ds-border-default: color-mix(in srgb, var(--primitive-zinc-900) 12%, transparent);
  --ds-border-emphasis: color-mix(in srgb, var(--primitive-zinc-900) 22%, transparent);

  /* #556b2f: olive on-light, AA no zinc-100 e branco no CTA (2026-09-18) */
  --ds-accent: var(--primitive-olive-on-light);
  --ds-accent-contrast: #ffffff;
  --ds-accent-muted: rgba(85, 107, 47, 0.14);
  --ds-focus-ring: rgba(85, 107, 47, 0.42);

  --ds-signal-red: #3f5a24;
  --ds-signal-green: #2f5a38;
  --ds-signal-blue: var(--primitive-cyan-on-light);
  --ds-signal-indigo: var(--primitive-indigo-on-light);

  --ds-ok: var(--primitive-sage-on-light);
  --ds-warn: var(--primitive-amber-on-light);
  --ds-danger: var(--primitive-rose-on-light);

  /* Gradiente light (2026-09-18): mesma geometria 120deg, rampa própria —
     leads on-light + miolo olive-500. --ds-gradient-brand resolve por tema
     por indireção (o :root dark fica intocado). Texto sobre a barra: branco
     no light (miolo ~4.3:1, só grande), tinta no dark. */
  --primitive-gradient-rgb: linear-gradient(
    120deg,
    var(--primitive-olive-on-light) 0%,
    var(--primitive-olive-500) 45%,
    var(--primitive-cyan-on-light) 100%
  );
  --primitive-gradient-rgb-stroke: conic-gradient(
    from 210deg,
    var(--primitive-olive-on-light) 0deg,
    var(--primitive-olive-500) 120deg,
    var(--primitive-cyan-on-light) 240deg,
    var(--primitive-olive-on-light) 360deg
  );

  --ds-shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.06);
  --ds-shadow-md: 0 8px 24px rgba(24, 24, 27, 0.08);
  --ds-shadow-lg: 0 24px 64px rgba(24, 24, 27, 0.12);
}

@media (prefers-color-scheme: light) {
  html:not([data-theme]) {
    color-scheme: light;

    --ds-bg-0: var(--primitive-zinc-100);
    --ds-bg-1: var(--primitive-zinc-50);
    --ds-bg-2: var(--primitive-zinc-200);
    --ds-bg-hover: var(--primitive-zinc-300);
    --ds-bg-inverse: var(--primitive-zinc-900);
    --ds-bg-sunken: #ececee;

    --ds-text-0: var(--primitive-zinc-900);
    --ds-text-1: var(--primitive-zinc-700);
    --ds-text-2: var(--primitive-zinc-600);
    --ds-text-inverse: var(--primitive-zinc-50);

    --ds-border-subtle: color-mix(in srgb, var(--primitive-zinc-900) 8%, transparent);
    --ds-border-default: color-mix(in srgb, var(--primitive-zinc-900) 12%, transparent);
    --ds-border-emphasis: color-mix(in srgb, var(--primitive-zinc-900) 22%, transparent);

    --ds-accent: var(--primitive-olive-on-light);
    --ds-accent-contrast: #ffffff;
    --ds-accent-muted: rgba(85, 107, 47, 0.14);
    --ds-focus-ring: rgba(85, 107, 47, 0.42);

    --ds-signal-red: #3f5a24;
    --ds-signal-green: #2f5a38;
    --ds-signal-blue: var(--primitive-cyan-on-light);
    --ds-signal-indigo: var(--primitive-indigo-on-light);

    --ds-ok: var(--primitive-sage-on-light);
    --ds-warn: var(--primitive-amber-on-light);
    --ds-danger: var(--primitive-rose-on-light);

    /* Gradiente light (2026-09-18): mesma geometria 120deg, rampa própria —
       leads on-light + miolo olive-500. Espelha o bloco data-theme. */
    --primitive-gradient-rgb: linear-gradient(
      120deg,
      var(--primitive-olive-on-light) 0%,
      var(--primitive-olive-500) 45%,
      var(--primitive-cyan-on-light) 100%
    );
    --primitive-gradient-rgb-stroke: conic-gradient(
      from 210deg,
      var(--primitive-olive-on-light) 0deg,
      var(--primitive-olive-500) 120deg,
      var(--primitive-cyan-on-light) 240deg,
      var(--primitive-olive-on-light) 360deg
    );

    --ds-shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.06);
    --ds-shadow-md: 0 8px 24px rgba(24, 24, 27, 0.08);
    --ds-shadow-lg: 0 24px 64px rgba(24, 24, 27, 0.12);
  }
}