/*
  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 + paper warm, Instrument Serif (display A),
  Barlow Condensed (display B UPPER), Inter (body), Inter Tight (UI), Mono.
*/

:root {
  /* ═══════════════════════════════════════════════
     Tipografia da marca (Organic Futurism)
     body = Inter (leitura) · ui = Inter Tight (chrome)
     ═══════════════════════════════════════════════ */
  --primitive-font-body: "Inter", -apple-system, BlinkMacSystemFont, ui-sans-serif, system-ui, sans-serif;
  --primitive-font-ui: "Inter Tight", -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);
  --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;
  --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 / Moss
     (slots RGB do v2 reusados: red≈olive, green≈moss, blue≈cyan)
     ═══════════════════════════════════════════════ */
  --primitive-olive: #a8c07a;
  --primitive-cyan: #5fced4;
  --primitive-moss: #7fa05f;
  --primitive-sage: #6bbf8c;
  --primitive-amber: #d4a44c;
  --primitive-rose: #ef6e8a;
  --primitive-ice: #8ecde0;
  --primitive-olive-dim: #7a8f52;
  --primitive-olive-on-light: #4a6529;
  --primitive-cyan-on-light: #1a6b74;
  --primitive-moss-on-light: #3f5a24;
  --primitive-olive-on-dark: #a8c07a;
  --primitive-cyan-on-dark: #5fced4;
  --primitive-moss-on-dark: #7fa05f;

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

  --primitive-gradient-rgb: linear-gradient(
    120deg,
    var(--primitive-olive) 0%,
    var(--primitive-moss) 45%,
    var(--primitive-cyan) 100%
  );
  --primitive-gradient-rgb-stroke: conic-gradient(
    from 210deg,
    var(--primitive-olive) 0deg,
    var(--primitive-moss) 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-moss-on-dark);
  --ds-signal-blue: var(--primitive-cyan-on-dark);

  --ds-brand-red: var(--primitive-olive);
  --ds-brand-green: var(--primitive-moss);
  --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 — paper cream + olive AA-safe (CTA e texto no botão ≥ 4.5:1)
   Selectors: attr data-theme + class .theme-light (applyTheme seta os dois). */
html[data-theme="light"],
:root[data-theme="light"],
html.theme-light,
:root.theme-light {
  color-scheme: light;

  --ds-bg-0: #f4f1ea;
  --ds-bg-1: #fcfaf4;
  --ds-bg-2: #e8e4d9;
  --ds-bg-hover: #ddd8cb;
  --ds-bg-inverse: #1a1a18;
  --ds-bg-sunken: #e4e0d4;

  --ds-text-0: #141412;
  --ds-text-1: #2c2b27;
  --ds-text-2: #4a4840;
  --ds-text-inverse: #ffffff;

  --ds-border-subtle: rgba(26, 26, 24, 0.1);
  --ds-border-default: rgba(26, 26, 24, 0.16);
  --ds-border-emphasis: rgba(26, 26, 24, 0.28);

  /* #4a6529: ~5.85:1 no paper, ~6.59:1 com branco no botão */
  --ds-accent: #4a6529;
  --ds-accent-contrast: #ffffff;
  --ds-accent-muted: rgba(74, 101, 41, 0.14);
  --ds-focus-ring: rgba(74, 101, 41, 0.42);

  --ds-signal-red: #3f5a24;
  --ds-signal-green: #2f5a38;
  --ds-signal-blue: #1a6b74;

  --ds-ok: #1f6b45;
  --ds-warn: #8a5a12;
  --ds-danger: #a12d45;

  --ds-shadow-sm: 0 8px 18px -14px rgba(40, 36, 28, 0.16);
  --ds-shadow-md: 0 16px 34px -24px rgba(40, 36, 28, 0.2), 0 0 0 1px var(--ds-border-subtle);
  --ds-shadow-lg: 0 28px 54px -34px rgba(40, 36, 28, 0.24), 0 12px 24px -22px rgba(74, 101, 41, 0.16);
}

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

    --ds-bg-0: #f4f1ea;
    --ds-bg-1: #fcfaf4;
    --ds-bg-2: #e8e4d9;
    --ds-bg-hover: #ddd8cb;
    --ds-bg-inverse: #1a1a18;
    --ds-bg-sunken: #e4e0d4;

    --ds-text-0: #141412;
    --ds-text-1: #2c2b27;
    --ds-text-2: #4a4840;
    --ds-text-inverse: #ffffff;

    --ds-border-subtle: rgba(26, 26, 24, 0.1);
    --ds-border-default: rgba(26, 26, 24, 0.16);
    --ds-border-emphasis: rgba(26, 26, 24, 0.28);

    --ds-accent: #4a6529;
    --ds-accent-contrast: #ffffff;
    --ds-accent-muted: rgba(74, 101, 41, 0.14);
    --ds-focus-ring: rgba(74, 101, 41, 0.42);

    --ds-signal-red: #3f5a24;
    --ds-signal-green: #2f5a38;
    --ds-signal-blue: #1a6b74;

    --ds-ok: #1f6b45;
    --ds-warn: #8a5a12;
    --ds-danger: #a12d45;

    --ds-shadow-sm: 0 8px 18px -14px rgba(40, 36, 28, 0.16);
    --ds-shadow-md: 0 16px 34px -24px rgba(40, 36, 28, 0.2), 0 0 0 1px var(--ds-border-subtle);
    --ds-shadow-lg: 0 28px 54px -34px rgba(40, 36, 28, 0.24), 0 12px 24px -22px rgba(74, 101, 41, 0.16);
  }
}