/* BackStage - tokens.css : design tokens + temas (compartilhado publico/admin) */

/* ============================================================
   BackStage — Design System "Studio Noir"
   Bastidor de show: preto quente de palco + âmbar tungstênio.
   Light = press kit em papel quente. Dark = camarim/estúdio.
   Tokens, base, components, motion, responsive.
   ============================================================ */

:root {
  color-scheme: light dark;

  /* — Surfaces & ink (papel quente) — */
  --c-bg: #f6f1e6;
  --c-bg-soft: #efe8d8;
  --c-surface: #fdfaf2;
  --c-surface-glass: rgba(253, 250, 242, 0.8);
  --c-surface-2: #ece3cf;
  --c-text: #221b10;
  --c-text-soft: #4b4232;
  --c-text-muted: #94886e;
  --c-border: rgba(34, 27, 16, 0.1);
  --c-border-strong: rgba(34, 27, 16, 0.2);
  --c-overlay: rgba(24, 19, 11, 0.45);
  --c-spotlight: rgba(255, 178, 36, 0.09);

  /* — Brand (BackStage — tungstênio sobre tinta) — */
  --brand-1: #271e10;   /* tinta de impresso */
  --brand-2: #6b5536;   /* sépia médio */
  --brand-3: #a8854e;   /* latão */
  --brand-grad: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
  --brand-grad-text: linear-gradient(110deg, #b45309 0%, #ea580c 100%);
  --hero-grad: linear-gradient(180deg, #f1e9d7 0%, #f6f1e6 100%);
  --c-on-brand-grad: #241505;
  --c-on-brand-grad-soft: rgba(36, 21, 5, 0.82);
  --hero-bg-opacity: 0.07;
  --hero-bg-filter: invert(1) sepia(0.5);
  --brand-tint: rgba(180, 83, 9, 0.08);
  --brand-ring: rgba(180, 83, 9, 0.32);

  /* — Feedback — */
  --c-success: #15803d;
  --c-error: #dc2626;
  --c-warn: #d97706;

  /* — Accent (âmbar legível sobre papel) — */
  --c-accent: #b45309;
  --c-accent-light: #d97706;
  --c-accent-dark: #92400e;
  --c-accent-soft: rgba(180, 83, 9, 0.08);
  --c-accent-grad: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  --c-accent-ring: rgba(180, 83, 9, 0.32);
  --sh-glow-accent: 0 0 0 1px var(--c-accent-ring), 0 18px 40px -12px rgba(180, 83, 9, .2);

  /* — Botões (par bg/fg estável nos dois temas) — */
  --btn-bg: var(--brand-1);
  --btn-bg-hover: #3e3321;
  --btn-fg: var(--c-bg);

  /* — Spacing — base 4 — */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px;

  /* — Radius (Sleek Sharp Edge) — */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 24px;
  --r-full: 999px;

  /* — Shadow — */
  --sh-1: 0 1px 2px rgba(9, 9, 11, .03), 0 1px 3px rgba(9, 9, 11, .02);
  --sh-2: 0 4px 12px rgba(9, 9, 11, .04), 0 2px 4px rgba(9, 9, 11, .03);
  --sh-3: 0 16px 32px -8px rgba(9, 9, 11, .06), 0 6px 14px -6px rgba(9, 9, 11, .04);
  --sh-4: 0 32px 64px -16px rgba(9, 9, 11, .1), 0 12px 24px -10px rgba(9, 9, 11, .05);
  --sh-glow: 0 0 0 1px var(--brand-ring), 0 18px 40px -12px rgba(9, 9, 11, .15);

  /* — Motion — */
  --m-fast: 150ms cubic-bezier(.4, 0, .2, 1);
  --m-base: 260ms cubic-bezier(.4, 0, .2, 1);
  --m-slow: 520ms cubic-bezier(.16, 1, .3, 1);

  /* — Layout — */
  --nav-h: 68px;
  --container: 1200px;
  --container-narrow: 760px;
  --z-nav: 50;
  --z-overlay: 80;
  --z-modal: 100;

  /* — Typography — */
  --ff-sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-display: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
  --ff-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* — Dark theme — */
[data-theme="dark"],
[data-theme="system"] {
  /* keep light defaults; system overridden by media query below */
}

[data-theme="light"] {
  color-scheme: light;
}

[data-theme="dark"] {
  color-scheme: dark;
  --c-bg: #0d0a06;
  --c-bg-soft: #120e08;
  --c-surface: #16110a;
  --c-surface-glass: rgba(22, 17, 10, 0.78);
  --c-surface-2: #1e170d;
  --c-text: #f4ecdc;
  --c-text-soft: #d8caac;
  --c-text-muted: #95876a;
  --c-border: rgba(244, 236, 220, 0.09);
  --c-border-strong: rgba(244, 236, 220, 0.18);
  --c-overlay: rgba(0, 0, 0, 0.72);
  --c-spotlight: rgba(255, 178, 36, 0.07);
  --c-accent: #ffb224;
  --c-accent-light: #ffc95e;
  --c-accent-dark: #f59e0b;
  --c-accent-soft: rgba(255, 178, 36, 0.1);
  --c-accent-grad: linear-gradient(135deg, #ffc95e 0%, #ff8e3c 100%);
  --c-accent-ring: rgba(255, 178, 36, 0.35);
  --sh-glow-accent: 0 0 0 1px var(--c-accent-ring), 0 18px 40px -12px rgba(255, 178, 36, .25);
  --brand-1: #ffb224;
  --brand-2: #ff8e3c;
  --brand-3: #c98a2e;
  --brand-grad: linear-gradient(135deg, #ffb224 0%, #ff7a18 100%);
  --brand-grad-text: linear-gradient(110deg, #ffd28a 0%, #ff9d3c 100%);
  --hero-grad: radial-gradient(1100px 560px at 50% -12%, rgba(255, 178, 36, 0.13), transparent 62%), linear-gradient(180deg, #0a0805 0%, #0d0a06 100%);
  --c-on-brand-grad: #1d1206;
  --c-on-brand-grad-soft: rgba(29, 18, 6, 0.82);
  --hero-bg-opacity: 0.13;
  --hero-bg-filter: sepia(0.7) saturate(0.9);
  --brand-tint: rgba(255, 178, 36, 0.1);
  --brand-ring: rgba(255, 178, 36, 0.35);
  --btn-bg: var(--brand-1);
  --btn-bg-hover: #ffc95e;
  --btn-fg: #1d1206;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-2: 0 4px 14px rgba(0, 0, 0, .5);
  --sh-3: 0 16px 32px -8px rgba(0, 0, 0, .6);
  --sh-4: 0 32px 64px -16px rgba(0, 0, 0, .7);
  --sh-glow: 0 0 0 1px var(--brand-ring), 0 18px 40px -12px rgba(255, 178, 36, .22);
}

@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    --c-bg: #0d0a06;
    --c-bg-soft: #120e08;
    --c-surface: #16110a;
    --c-surface-glass: rgba(22, 17, 10, 0.78);
    --c-surface-2: #1e170d;
    --c-text: #f4ecdc;
    --c-text-soft: #d8caac;
    --c-text-muted: #95876a;
    --c-border: rgba(244, 236, 220, 0.09);
    --c-border-strong: rgba(244, 236, 220, 0.18);
    --c-overlay: rgba(0, 0, 0, 0.72);
    --c-spotlight: rgba(255, 178, 36, 0.07);
    --c-accent: #ffb224;
    --c-accent-light: #ffc95e;
    --c-accent-dark: #f59e0b;
    --c-accent-soft: rgba(255, 178, 36, 0.1);
    --c-accent-grad: linear-gradient(135deg, #ffc95e 0%, #ff8e3c 100%);
    --c-accent-ring: rgba(255, 178, 36, 0.35);
    --sh-glow-accent: 0 0 0 1px var(--c-accent-ring), 0 18px 40px -12px rgba(255, 178, 36, .25);
    --brand-1: #ffb224;
    --brand-2: #ff8e3c;
    --brand-3: #c98a2e;
    --brand-grad: linear-gradient(135deg, #ffb224 0%, #ff7a18 100%);
    --brand-grad-text: linear-gradient(110deg, #ffd28a 0%, #ff9d3c 100%);
    --hero-grad: radial-gradient(1100px 560px at 50% -12%, rgba(255, 178, 36, 0.13), transparent 62%), linear-gradient(180deg, #0a0805 0%, #0d0a06 100%);
    --c-on-brand-grad: #1d1206;
    --c-on-brand-grad-soft: rgba(29, 18, 6, 0.82);
    --hero-bg-opacity: 0.13;
    --hero-bg-filter: sepia(0.7) saturate(0.9);
    --brand-tint: rgba(255, 178, 36, 0.1);
    --brand-ring: rgba(255, 178, 36, 0.35);
    --btn-bg: var(--brand-1);
    --btn-bg-hover: #ffc95e;
    --btn-fg: #1d1206;
    --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
    --sh-2: 0 4px 14px rgba(0, 0, 0, .5);
    --sh-3: 0 16px 32px -8px rgba(0, 0, 0, .6);
    --sh-4: 0 32px 64px -16px rgba(0, 0, 0, .7);
    --sh-glow: 0 0 0 1px var(--brand-ring), 0 18px 40px -12px rgba(255, 178, 36, .22);
  }
}