/* ==========================================================================
   Iris · DESIGN TOKENS
   Este é o único arquivo que define a identidade visual.
   Para mudar cor, fonte, raio, espaçamento ou ritmo do produto inteiro,
   edite aqui. Nenhum outro CSS deve conter valores "soltos".

   Índice
   1. Marca e tipografia
   2. Escala de texto e espaçamento
   3. Forma, movimento e camadas
   4. Tema claro
   5. Tema escuro
   ========================================================================== */


/* 1. MARCA E TIPOGRAFIA ---------------------------------------------------- */
:root {
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  /* leitura: as respostas da Iris (serifa feita para tela, par da Instrument Serif dos títulos) */
  --font-read: "Newsreader", "Iowan Old Style", "Charter", Georgia, serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

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

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-normal: 1.55;
  --tracking-tight: -0.035em;
  --tracking-snug: -0.02em;
  --tracking-caps: 0.08em;
}


/* 2. ESCALA DE TEXTO E ESPAÇAMENTO (fluidas, sem media query) -------------- */
:root {
  --text-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
  --text-sm: clamp(0.8125rem, 0.79rem + 0.12vw, 0.9rem);
  --text-base: clamp(0.9375rem, 0.91rem + 0.15vw, 1.0625rem);
  --text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);
  --text-2xl: clamp(1.625rem, 1.3rem + 1.5vw, 2.75rem);
  --text-3xl: clamp(2rem, 1.4rem + 3vw, 4rem);
  --text-hero: clamp(2.5rem, 1.4rem + 5.6vw, 6.25rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --section-y: clamp(4rem, 2.5rem + 7vw, 9rem);
  --container: 1200px;
  --container-narrow: 760px;

  --tap-min: 44px; /* alvo mínimo de toque */
}


/* 3. FORMA, MOVIMENTO E CAMADAS -------------------------------------------- */
:root {
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 640ms;

  --z-nav: 50;
  --z-sheet: 60;
  --z-toast: 80;

  --nav-h: 64px;
  --sidebar-w: 256px;
}


/* 4. TEMA CLARO ------------------------------------------------------------ */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* superfícies */
  --bg: #fafaf9;
  --bg-elevated: #ffffff;
  --bg-sunken: #f2f2ef;
  --surface: #ffffff;
  --surface-hover: #f6f6f3;

  /* linhas */
  --border: #e6e5e0;
  --border-strong: #d0cfc8;

  /* texto */
  --text: #0b0b0c;
  --text-muted: #55554f;
  --text-faint: #74736c;

  /* bloco invertido (botão principal, faixa final) */
  --inverse-bg: #0b0b0c;
  --inverse-text: #fafaf9;

  /* acento único da marca */
  --accent: #ff5a1f;
  --accent-hover: #e94a11;
  --accent-soft: rgba(255, 90, 31, 0.12);
  --accent-text: #c2410c; /* acento seguro para texto pequeno */
  --accent-contrast: #ffffff;

  /* estados */
  --success: #15803d;
  --success-soft: rgba(21, 128, 61, 0.12);
  --warning: #b45309;
  --danger: #dc2626;
  --danger-soft: rgba(220, 38, 38, 0.1);

  /* efeitos */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px #0b0b0c;
  --shadow-sm: 0 1px 2px rgba(11, 11, 12, 0.05);
  --shadow-md: 0 8px 24px -8px rgba(11, 11, 12, 0.12), 0 2px 6px rgba(11, 11, 12, 0.04);
  --shadow-lg: 0 32px 80px -24px rgba(11, 11, 12, 0.28), 0 8px 24px -12px rgba(11, 11, 12, 0.12);
  --glass: rgba(250, 250, 249, 0.72);
  --overlay: rgba(11, 11, 12, 0.4);
  --grid-line: rgba(11, 11, 12, 0.06);

  /* mídia do estúdio (mockups) */
  --frame-a: #e9e8e3;
  --frame-b: #cfcdc5;
  --clip-1: #0b0b0c;
  --clip-2: #55554f;
  --clip-3: #a8a69d;
  --wave: #55554f;
}


/* 5. TEMA ESCURO ----------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0a0a0a;
  --bg-elevated: #121212;
  --bg-sunken: #050505;
  --surface: #141414;
  --surface-hover: #1b1b1b;

  --border: #242423;
  --border-strong: #383836;

  --text: #f5f5f3;
  --text-muted: #a5a49d;
  --text-faint: #85847d;

  --inverse-bg: #f5f5f3;
  --inverse-text: #0a0a0a;

  --accent: #ff6a33;
  --accent-hover: #ff8155;
  --accent-soft: rgba(255, 106, 51, 0.16);
  --accent-text: #ff8a5c;
  --accent-contrast: #0a0a0a;

  --success: #4ade80;
  --success-soft: rgba(74, 222, 128, 0.14);
  --warning: #fbbf24;
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.14);

  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px #f5f5f3;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 32px 80px -24px rgba(0, 0, 0, 0.8), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  --glass: rgba(10, 10, 10, 0.72);
  --overlay: rgba(0, 0, 0, 0.6);
  --grid-line: rgba(245, 245, 243, 0.06);

  --frame-a: #1c1c1b;
  --frame-b: #0f0f0f;
  --clip-1: #f5f5f3;
  --clip-2: #85847d;
  --clip-3: #4a4a47;
  --wave: #85847d;
}