/* FluxoGen — design tokens (single source of truth).
   Brand, typography, radii and spacing are mode-independent.
   Semantic tokens default to LIGHT (the app) and flip under [data-theme="dark"] (the landing). */

:root {
  /* ---- Brand: emerald (primary = 700) ---- */
  --emerald-50:  #ECFDF5;
  --emerald-100: #D1FAE5;
  --emerald-200: #A7F3D0;
  --emerald-300: #6EE7B7;
  --emerald-400: #34D399; /* mint — "Gen" / highlight */
  --emerald-500: #10B981;
  --emerald-600: #059669;
  --emerald-700: #047857; /* brand */
  --emerald-800: #065F46;
  --emerald-900: #064E3B;
  --mint: var(--emerald-400);

  /* ---- AI accent: teal (highlight = 400). Reserved for logo / AI / "generating". ---- */
  --teal-300: #5EEAD4;
  --teal-400: #2DD4BF;
  --teal-500: #14B8A6;
  --teal-600: #0D9488;

  /* ---- Typography (Inter must be loaded separately) ---- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fs-display: 2.25rem; /* 36px */
  --fs-h1: 1.75rem;      /* 28px */
  --fs-h2: 1.375rem;     /* 22px */
  --fs-h3: 1.125rem;     /* 18px */
  --fs-body: 1rem;       /* 16px */
  --fs-sm: 0.875rem;     /* 14px */
  --fs-caption: 0.75rem; /* 12px */
  --lh-tight: 1.2;
  --lh-snug: 1.3;
  --lh-normal: 1.6;

  /* ---- Radii ---- */
  --radius-sm: 6px;
  --radius-md: 8px;   /* buttons */
  --radius-lg: 12px;  /* cards */
  --radius-xl: 16px;
  --radius-pill: 9999px;

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;

  /* ---- AI glow: logo / AI moments ONLY, never general UI ---- */
  --glow-ai: 0 0 4px rgba(45, 212, 191, 0.85), 0 0 9px rgba(45, 212, 191, 0.40);

  --bg: #F1F1E9;          /* greige canvas */
  --surface: #FFFFFF;     /* white cards lift off the canvas */
  --surface-2: #ECEBE1;   /* warm inset inside cards */
  --border: #E1E0D3;
  --border-strong: #CFCDBE;
  --text: #1C1E16;        /* warm near-black */
  --text-muted: #5E5F54;
  --text-faint: #98998C;
  --primary: var(--emerald-700);
  --on-primary: #FFFFFF;
  --accent: var(--teal-600);
  --success: var(--emerald-700);
  --warning: #B45309;
  --error: #DC2626;
}

/* ---- Semantic tokens: DARK (landing) ---- */
[data-theme="dark"] {
  --bg: #0A0E17;
  --surface: #11161F;
  --surface-2: #161D28;
  --border: #232C39;
  --border-strong: #2F3A48;
  --text: #EEF2F7;
  --text-muted: #97A2B2;
  --text-faint: #5D6776;
  --primary: var(--emerald-500);
  --on-primary: #04231A;
  --accent: var(--teal-400);
  --success: var(--emerald-400);
  --warning: #F59E0B;
  --error: #F87171;
}