/*
 * Absolute ZRO — tokens. Identidade oficial (zrofilmes.vercel.app/absolute), no Padrão Apple desde 25/10/2026:
 * claro por padrão, títulos em Figtree, botões em Liquid Glass, texto só em grafite/branco e cinza de apoio
 * (nada de texto azul). Cada produto mantém a própria cor (--p-*) e o próprio ícone.
 */
:root {
  /* preto fosco: grafite profundo + grão sutil (--grain), nunca #000 chapado */
  --zro-void: #0e0e10;
  --zro-ink: #131316;
  --zro-graphite: #17171a;
  --zro-smoke: #1e1e22;
  --zro-mist: #2c2c31;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --zro-mute: #8e8e93;
  --zro-ash: #aeaeb2;
  --zro-light: #f5f5f7;
  --zro-white: #ffffff;
  --zro-blue: #2d7bff;
  --zro-sky: #8eb2ff;
  --zro-lav: #a98bff;
  --zro-ice: #f5f7fa;
  --zro-deep: #0b1f2d;
  --zro-ok: #30d158;
  --zro-warn: #ffb340;
  --zro-danger: #ff453a;
  --zro-paper: #fbfbfd;
  --zro-paper-ink: #111114;
  --zro-paper-mute: #6e6e73;

  /* cores das marcas (ícones e brilhos; nunca texto pequeno sobre elas) */
  --p-carro-do-freela: #ff3d9a;
  --p-carro-do-freela-2: #f0ede7;
  --p-tpeasy: #2f6bff;
  --p-tpeasy-2: #c9cad1;
  --p-sobedesce: #0a84ff;
  --p-sobedesce-2: #7c5cff;
  --p-synquei: #4d82ff;
  --p-synquei-2: #a98bff;
  --p-ai-edit: #d4d5db;
  --p-ai-edit-2: #6a6b73;
  --p-nossom: #5aa9ff;
  --p-nossom-2: #dcefff;
  --p-finishing: #ffb800; /* Revela: amarelo filme (ADR 0016) */
  --p-finishing-2: #8b3fe8; /* roxo */

  /* Figtree nos títulos (Padrão Apple, 25/10/2026); Inter no texto corrido. */
  --font-apple: 'Figtree Variable', 'Inter Variable', system-ui, sans-serif;
  --font-brand: 'Inter Variable', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  --font-display: var(--font-apple);
  --font-sans: 'Inter Variable', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', sans-serif;
  --font-serif: 'Instrument Serif', ui-serif, Georgia, serif;
  --font-mono: 'Geist Mono Variable', ui-monospace, 'SF Mono', Menlo, monospace;

  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;
  --radius-xl: 32px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 88px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring: cubic-bezier(0.32, 0.72, 0, 1);
  --glow: 0 0 0 1px rgb(255 255 255 / 0.2), 0 10px 40px rgb(0 0 0 / 0.3);
  --shadow-float: 0 1px 0 rgb(255 255 255 / 0.06) inset, 0 24px 60px rgb(0 0 0 / 0.5);

  /* vidro (linha do NOSSOM) */
  --glass-fill: linear-gradient(165deg, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0.03) 42%, rgb(255 255 255 / 0.05));
  --glass-rim: linear-gradient(140deg, rgb(255 255 255 / 0.36), rgb(255 255 255 / 0.05) 32%, rgb(255 255 255 / 0.06) 62%, rgb(255 255 255 / 0.22));

  /* tema escuro (padrão) */
  --bg: var(--zro-void);
  --surface: var(--zro-smoke);
  --surface-2: var(--zro-graphite);
  --surface-3: var(--zro-mist);
  --text: #e5e5ea;
  --text-strong: var(--zro-light);
  --text-mute: var(--zro-ash);
  --text-faint: var(--zro-mute);
  --line: rgb(235 235 245 / 0.1);
  --line-strong: rgb(235 235 245 / 0.2);
  /* Sem azul em texto e botão (Padrão Apple): destaque em branco/grafite, apoio em cinza. */
  --accent: #f5f5f7;
  --accent-text: #f5f5f7;
  --focus: #f5f5f7;
  --eyebrow: #a1a1a6;
  /* Liquid Glass dos botões: vidro claro sobre o escuro; a ação principal em vidro claro opaco. */
  --btn-fill: rgb(255 255 255 / 0.1);
  --btn-sheen: linear-gradient(180deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0) 55%);
  --btn-ink: #f5f5f7;
  --btn-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), 0 0 0 1px rgb(255 255 255 / 0.14), 0 10px 28px rgb(0 0 0 / 0.4);
  --btn-shadow-hover: inset 0 1px 0 rgb(255 255 255 / 0.32), 0 0 0 1px rgb(255 255 255 / 0.2), 0 12px 32px rgb(0 0 0 / 0.45);
  --btn-main-fill: rgb(245 245 247 / 0.94);
  --btn-main-sheen: linear-gradient(180deg, rgb(255 255 255 / 0.6), rgb(255 255 255 / 0) 50%);
  --btn-main-ink: #1d1d1f;
  --btn-main-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), inset 0 -1px 0 rgb(0 0 0 / 0.12), 0 0 0 1px rgb(255 255 255 / 0.3), 0 6px 18px rgb(0 0 0 / 0.4);
  --pill-fill: linear-gradient(180deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.04));
  --pill-rim: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 0 0 1px rgb(255 255 255 / 0.12);
  /* superfícies de interface (sidebar, cápsula, realces) */
  --chrome-bg: color-mix(in srgb, var(--zro-ink) 92%, transparent);
  --glass-bg: rgb(20 20 24 / 0.8);
  --hover: rgb(255 255 255 / 0.05);
  --active: rgb(255 255 255 / 0.08);
  --lift: 0 20px 50px rgb(0 0 0 / 0.35);
  --halo: 0.16;
  --ok-text: var(--zro-ok);
  --warn-text: var(--zro-warn);
  --danger-text: var(--zro-danger);
  color-scheme: dark;
}

/* Tema claro: papel fosco, superfícies brancas, mesma marca. Os palcos (.on-dark) continuam escuros. */
:root[data-theme='light'] {
  --bg: #f4f4f6;
  --surface: #ffffff;
  --surface-2: #f7f7f9;
  --surface-3: #e9e9ee;
  --text: #1d1d1f;
  --text-strong: var(--zro-paper-ink);
  --text-mute: #55555b;
  --text-faint: #6e6e73;
  --line: rgb(60 60 67 / 0.12);
  --line-strong: rgb(60 60 67 / 0.24);
  --accent: #1d1d1f;
  --accent-text: #1d1d1f;
  --focus: #1d1d1f;
  --eyebrow: #6e6e73;
  --btn-fill: rgb(255 255 255 / 0.55);
  --btn-sheen: linear-gradient(180deg, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0) 55%);
  --btn-ink: #1d1d1f;
  --btn-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), inset 0 -1px 0 rgb(0 0 0 / 0.06), 0 0 0 1px rgb(0 0 0 / 0.1), 0 6px 18px rgb(0 0 0 / 0.07);
  --btn-shadow-hover: inset 0 1px 0 rgb(255 255 255 / 0.95), inset 0 -1px 0 rgb(0 0 0 / 0.06), 0 0 0 1px rgb(0 0 0 / 0.12), 0 10px 26px rgb(0 0 0 / 0.11);
  --btn-main-fill: rgb(29 29 31 / 0.92);
  --btn-main-sheen: linear-gradient(180deg, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0) 50%);
  --btn-main-ink: #ffffff;
  --btn-main-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), inset 0 -1px 0 rgb(0 0 0 / 0.35), 0 0 0 1px rgb(0 0 0 / 0.45), 0 4px 14px rgb(0 0 0 / 0.14);
  --pill-fill: linear-gradient(180deg, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0.55));
  --pill-rim: inset 0 1px 0 rgb(255 255 255 / 1), 0 0 0 1px rgb(0 0 0 / 0.08);
  --shadow-float: 0 1px 0 rgb(255 255 255 / 0.9) inset, 0 1px 2px rgb(0 0 0 / 0.04), 0 18px 48px rgb(0 0 0 / 0.08);
  --glass-fill: linear-gradient(165deg, rgb(255 255 255 / 0.78), rgb(250 250 252 / 0.5) 42%, rgb(245 245 247 / 0.45));
  --glass-rim: linear-gradient(140deg, rgb(255 255 255 / 1), rgb(255 255 255 / 0.3) 32%, rgb(0 0 0 / 0.07) 62%, rgb(255 255 255 / 0.9));
  --chrome-bg: rgb(246 246 248 / 0.82);
  --glass-bg: rgb(255 255 255 / 0.72);
  --hover: rgb(0 0 0 / 0.04);
  --active: rgb(0 0 0 / 0.065);
  --lift: 0 20px 50px rgb(0 0 0 / 0.1);
  --halo: 0.1;
  --ok-text: #1d7a37;
  --warn-text: #9a5300;
  --danger-text: #c4261d;
  color-scheme: light;
}

/* Palcos escuros nos dois temas (só onde a peça pede: comandos de Terminal, por exemplo). O .zro-card--stage segue o
   tema: vidro claro no claro, grafite no escuro (Padrão Apple). */
.on-dark {
  --bg: var(--zro-void);
  --surface: var(--zro-smoke);
  --surface-2: var(--zro-graphite);
  --surface-3: var(--zro-mist);
  --text: #e5e5ea;
  --text-strong: #ffffff;
  --text-mute: var(--zro-ash);
  --text-faint: var(--zro-mute);
  --line: rgb(235 235 245 / 0.1);
  --line-strong: rgb(235 235 245 / 0.2);
  --accent: #f5f5f7;
  --accent-text: #f5f5f7;
  --focus: #f5f5f7;
  --eyebrow: #a1a1a6;
  --btn-fill: rgb(255 255 255 / 0.1);
  --btn-sheen: linear-gradient(180deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0) 55%);
  --btn-ink: #f5f5f7;
  --btn-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), 0 0 0 1px rgb(255 255 255 / 0.14), 0 10px 28px rgb(0 0 0 / 0.4);
  --btn-main-fill: rgb(245 245 247 / 0.94);
  --btn-main-sheen: linear-gradient(180deg, rgb(255 255 255 / 0.6), rgb(255 255 255 / 0) 50%);
  --btn-main-ink: #1d1d1f;
  --pill-fill: linear-gradient(180deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.04));
  --pill-rim: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 0 0 1px rgb(255 255 255 / 0.12);
  --hover: rgb(255 255 255 / 0.05);
  --active: rgb(255 255 255 / 0.08);
  --ok-text: var(--zro-ok);
  --warn-text: var(--zro-warn);
  --danger-text: var(--zro-danger);
  --shadow-float: 0 1px 0 rgb(255 255 255 / 0.06) inset, 0 24px 60px rgb(0 0 0 / 0.5);
  color-scheme: dark;
  color: var(--text);
}