/* =============================================================================
   Criative — Design System · Design Tokens
   -----------------------------------------------------------------------------
   Kit estilo shadcn/ui · acento vermelho · dois temas espelhados (Dark / Light).
   Fonte da verdade: designsystem.html  ·  arquivo Paper "Criative"
   (https://app.paper.design/file/01KZV8V57WMV3BQJMQ2MP02ZW2/1-0)
   Valores extraídos dos nós reais (JSX + estilos computados), não de screenshots.

   COMO USAR
     1. <link rel="stylesheet" href="tokens.css">           (antes do seu CSS)
     2. no <html>: data-theme="dark"  ou  data-theme="light"  (default: dark)
     3. consuma via var():  color: var(--foreground); background: var(--card);

   Troca de tema em runtime:
     document.documentElement.setAttribute('data-theme', 'light');

   Fontes (Google Fonts):
     Space+Grotesk:wght@300..700 · DM+Sans:400,500,700 · Geist+Mono:wght@100..900
   ============================================================================= */

:root {
  /* ── Tipografia · famílias ───────────────────────────────────────────── */
  --font-display: "Space Grotesk", system-ui, sans-serif; /* display / títulos */
  --font-sans:    "DM Sans", system-ui, sans-serif;       /* corpo / UI        */
  --font-mono:    "Geist Mono", ui-monospace, monospace;  /* números / labels  */

  /* ── Tipografia · escala ─────────────────────────────────────────────── */
  --text-display: 24px;  --leading-display: 32px;  /* Space Grotesk 500 */
  --text-title:   18px;  --leading-title:   28px;  /* Space Grotesk 500 */
  --text-body:    14px;  --leading-body:    20px;  /* DM Sans 400        */
  --text-label:   12px;  --leading-label:   20px;  /* DM Sans 500        */

  /* ── Raios de canto ──────────────────────────────────────────────────── */
  --radius-sm: 6px;   /* elementos pequenos        */
  --radius:    8px;   /* botões, inputs            */
  --radius-lg: 10px;  /* cards, tiles, swatches    */

  /* ── Espaçamento · base 4px (Tailwind) ───────────────────────────────── */
  --space-1: 4px;    /* gap interno de botão            */
  --space-2: 8px;    /* padding de input                */
  --space-3: 12px;   /* gaps menores de grid            */
  --space-4: 16px;   /* padding de card, gaps de conteúdo */
  --space-6: 24px;   /* padding do canvas, gap entre cards */

  /* ── Gráficos · escala monocromática de vermelho (igual nos 2 temas) ─── */
  --chart-1: oklch(80.8% 0.114 19.6);  /* red-300 · rosé claro */
  --chart-2: #FB2C36;                  /* red-500              */
  --chart-3: oklch(57.7% 0.245 27.3);  /* red-600              */
  --chart-4: oklch(50.5% 0.213 27.5);  /* red-700              */
  --chart-5: #9F0712;                  /* red-800              */

  /* ── Semântico · sucesso (igual nos 2 temas) ─────────────────────────── */
  --ok: #22C55E;
}

/* ── Tema DARK (padrão) ───────────────────────────────────────────────── */
:root,
[data-theme="dark"] {
  --background:          #0C090C;               /* base do conteúdo         */
  --surface:            #0C090C;               /* ground do app (canvas)   */
  --card:               #1D161E;               /* superfície elevada       */
  --foreground:         #FAFAFA;               /* texto principal          */
  --muted-foreground:   #A89EA9;               /* texto secundário         */
  --primary:            #9F0712;               /* ação principal / acento  */
  --primary-foreground: #FEF2F2;               /* texto sobre primary      */
  --secondary:          #27272A;               /* botão / superfície neutra*/
  --secondary-foreground:#FAFAFA;              /* texto sobre secondary    */
  --muted:              #2A212C;               /* fundo sutil              */
  --accent:             #2A212C;               /* hover / destaque leve    */
  --border:             rgba(255,255,255,.10); /* bordas / divisores       */
  --input:              rgba(255,255,255,.043);/* fundo de campo           */
  --input-border:       rgba(255,255,255,.15); /* borda de campo           */
  --ring:               rgba(250,250,250,.14); /* anel de foco / ring card */
}

/* ── Tema LIGHT ───────────────────────────────────────────────────────── */
[data-theme="light"] {
  --background:          #FFFFFF;
  --surface:            #F3F1F3;
  --card:               #FFFFFF;
  --foreground:         #0C090C;
  --muted-foreground:   #79697B;
  --primary:            oklch(50.5% 0.213 27.5); /* ~#C10007 · red-700 */
  --primary-foreground: #FEF2F2;
  --secondary:          #F4F4F5;
  --secondary-foreground:#0C090C;
  --muted:              #F3F1F3;
  --accent:             #F3F1F3;
  --border:             #E7E4E7;
  --input:              #FFFFFF;
  --input-border:       #E7E4E7;
  --ring:               rgba(12,9,12,.14);
}