/* =========================================================
   rogpe.tech — DESIGN TOKENS
   Fonte canonica das variaveis de marca (plasma/cosmos/aurora/quartzo).

   Extraido de brandbook.css: aquele arquivo estiliza a pagina de
   documentacao do brandbook e nao serve ao site. A home carregava os
   1825 linhas inteiras so para obter estas variaveis.

   Quem consome: index.html, brandbook.html, carrossel-studio.html
   ========================================================= */
:root {
  /* — Brand color: Plasma — */
  --plasma-50:  oklch(98% 0.012 285);
  --plasma-100: oklch(94% 0.035 285);
  --plasma-200: oklch(88% 0.07 285);
  --plasma-300: oklch(78% 0.13 285);
  --plasma-400: oklch(65% 0.20 285);
  --plasma-500: oklch(52% 0.245 285); /* primária */
  --plasma-600: oklch(45% 0.235 285);
  --plasma-700: oklch(37% 0.205 285);
  --plasma-800: oklch(28% 0.155 285);
  --plasma-900: oklch(18% 0.09 285);

  /* — Aurora (lavender quente) — */
  --aurora-100: oklch(96% 0.025 295);
  --aurora-300: oklch(88% 0.06 295);
  --aurora-500: oklch(75% 0.12 295);

  /* — Cosmos (preto refinado, com toque) — */
  --cosmos-50:  oklch(98% 0.004 285);
  --cosmos-100: oklch(95% 0.004 285);
  --cosmos-200: oklch(90% 0.005 285);
  --cosmos-300: oklch(82% 0.006 285);
  --cosmos-400: oklch(68% 0.007 285);
  --cosmos-500: oklch(52% 0.008 285);
  --cosmos-600: oklch(40% 0.008 285);
  --cosmos-700: oklch(28% 0.008 285);
  --cosmos-800: oklch(18% 0.009 285);
  --cosmos-900: oklch(11% 0.012 285);
  --cosmos-950: oklch(7%  0.015 285);

  /* — Quartzo (off-white quente, fundo principal) — */
  --quartzo: oklch(98.5% 0.004 285);
  --quartzo-warm: oklch(97% 0.008 90);

  /* — Semânticas — */
  --success: oklch(62% 0.16 155);
  --success-bg: oklch(95% 0.04 155);
  --warning: oklch(75% 0.16 75);
  --warning-bg: oklch(95% 0.05 75);
  --danger: oklch(58% 0.22 25);
  --danger-bg: oklch(95% 0.04 25);
  --info: oklch(60% 0.15 235);
  --info-bg: oklch(95% 0.04 235);

  /* — Tipografia — */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Type scale (1.250 — major third) */
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 48px;
  --text-5xl: 64px;
  --text-6xl: 88px;
  --text-7xl: 120px;
  --text-8xl: 160px;

  /* Spacing (4px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 192px;

  /* Radius */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-full: 9999px;

  /* Shadows (sutis, premium) */
  --shadow-xs: 0 1px 2px oklch(15% 0.02 285 / 0.04);
  --shadow-sm: 0 2px 4px oklch(15% 0.02 285 / 0.06), 0 1px 2px oklch(15% 0.02 285 / 0.04);
  --shadow-md: 0 8px 16px oklch(15% 0.02 285 / 0.08), 0 2px 4px oklch(15% 0.02 285 / 0.04);
  --shadow-lg: 0 20px 40px oklch(15% 0.02 285 / 0.10), 0 4px 8px oklch(15% 0.02 285 / 0.04);
  --shadow-plasma: 0 12px 32px oklch(52% 0.245 285 / 0.25);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-micro: 120ms;
  --dur-small: 200ms;
  --dur-med: 340ms;
  --dur-large: 560ms;

  /* Layout */
  --max-w: 1240px;
  --gutter: clamp(24px, 5vw, 80px);
}