/* ============================================
   LUISON.IO — DESIGN TOKENS
   Synced with Figma Variables
   ============================================ */

/* ── PRIMITIVES ── */
:root {
  /* Blue */
  --prim-blue-100: #d0dbfb;
  --prim-blue-200: #a1b8f7;
  --prim-blue-300: #7299f3;
  --prim-blue-400: #5b7fe8;
  --prim-blue-500: #4a68d4;
  --prim-blue-600: #3852bf;

  /* Violet */
  --prim-violet-100: #d8cefc;
  --prim-violet-200: #b49df8;
  --prim-violet-300: #9f82ee;
  --prim-violet-400: #8b6be0;
  --prim-violet-500: #7355cc;
  --prim-violet-600: #5c40b8;

  /* Magenta */
  --prim-magenta-100: #f0c4e0;
  --prim-magenta-200: #e093c4;
  --prim-magenta-300: #d063a9;
  --prim-magenta-400: #c4589a;
  --prim-magenta-500: #a8447f;
  --prim-magenta-600: #8c3066;

  /* Neutral */
  --prim-neutral-0:   #ffffff;
  --prim-neutral-50:  #f4f3f8;
  --prim-neutral-60:  #f0eef6;
  --prim-neutral-75:  #eceaf4;
  --prim-neutral-100: #e2e0ee;
  --prim-neutral-200: #c8c5dc;
  --prim-neutral-250: #9490b8;
  --prim-neutral-300: #7874a0;
  --prim-neutral-350: #5c5875;
  --prim-neutral-400: #3e3c52;
  --prim-neutral-500: #272738;
  --prim-neutral-600: #1e1e2c;
  --prim-neutral-700: #17171f;
  --prim-neutral-800: #111118;
  --prim-neutral-900: #0d0d14;

  /* Status */
  --prim-green: #4ccc88;
  --prim-amber: #e8a84a;
  --prim-red:   #e85b5b;

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Radius */
  --radius-none: 0px;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-full: 9999px;

  /* Border width */
  --border-subtle:  0.5px;
  --border-default: 1px;
  --border-strong:  2px;

  /* Typography — families */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Roboto', sans-serif;
  --font-mono:    'Roboto Mono', monospace;

  /* Font sizes — Desktop (synced with Figma) */
  --size-display:  64px;
  --size-h1:       36px;
  --size-h2:       28px;
  --size-h3:       22px;
  --size-h4:       18px;
  --size-body-lg:  18px;
  --size-body:     16px;
  --size-body-sm:  14px;
  --size-label:    12px;
  --size-mono-lg:  16px;
  --size-mono-md:  14px;
  --size-mono-sm:  12px;
  --size-mono-xs:  10px;

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.6;
  --lh-relaxed: 1.75;

  /* Brand gradients */
  --grad-brand:   linear-gradient(135deg, var(--prim-blue-500), var(--prim-violet-400), var(--prim-magenta-500));
  --grad-brand-h: linear-gradient(95deg,  var(--prim-blue-500), var(--prim-violet-400), var(--prim-magenta-500));
  --grad-brand-v: linear-gradient(180deg, var(--prim-blue-500), var(--prim-magenta-500));
}

/* ── DARK MODE (default) ── */
:root,
[data-theme="dark"] {
  --color-bg-page:      var(--prim-neutral-800);
  --color-bg-secondary: var(--prim-neutral-700);
  --color-bg-card:      var(--prim-neutral-700);
  --color-bg-surface:   var(--prim-neutral-600);
  --color-bg-overlay:   var(--prim-neutral-900);

  --color-border-default: var(--prim-neutral-600);
  --color-border-subtle:  var(--prim-neutral-500);
  --color-border-strong:  var(--prim-neutral-400);

  --color-text-default:     var(--prim-neutral-50);
  --color-text-muted:       var(--prim-neutral-250);
  --color-text-placeholder: var(--prim-neutral-350);

  --color-brand-blue:    var(--prim-blue-500);
  --color-brand-violet:  var(--prim-violet-400);
  --color-brand-magenta: var(--prim-magenta-500);

  --color-interactive-primary:   var(--prim-blue-500);
  --color-interactive-secondary: var(--prim-violet-400);
  --color-interactive-hover:     var(--prim-violet-400);
  --color-focus: var(--prim-blue-500);

  --color-success: var(--prim-green);
  --color-warning: var(--prim-amber);
  --color-error:   var(--prim-red);

  --color-logo-l: var(--prim-neutral-0);

  --elevation-1: var(--prim-neutral-700);
  --elevation-2: var(--prim-neutral-600);
  --elevation-3: var(--prim-neutral-500);
}

/* ── LIGHT MODE ── */
[data-theme="light"] {
  --color-bg-page:      var(--prim-neutral-50);
  --color-bg-secondary: var(--prim-neutral-60);
  --color-bg-card:      var(--prim-neutral-0);
  --color-bg-surface:   var(--prim-neutral-100);
  --color-bg-overlay:   var(--prim-neutral-200);

  --color-border-default: var(--prim-neutral-100);
  --color-border-subtle:  var(--prim-neutral-200);
  --color-border-strong:  var(--prim-neutral-300);

  --color-text-default:     var(--prim-neutral-800);
  --color-text-muted:       var(--prim-neutral-400);
  --color-text-placeholder: var(--prim-neutral-300);

  --color-logo-l: var(--prim-neutral-800);

  --elevation-1: 0 1px 2px rgba(0,0,0,0.08);
  --elevation-2: 0 2px 8px rgba(0,0,0,0.12);
  --elevation-3: 0 4px 16px rgba(0,0,0,0.16);
}

/* ── SEMANTIC SPACING ── */
:root {
  --spacing-xs: var(--space-2);
  --spacing-sm: var(--space-3);
  --spacing-md: var(--space-4);
  --spacing-lg: var(--space-6);
  --spacing-xl: var(--space-8);
  --section-sm: var(--space-12);
  --section-md: var(--space-16);
  --section-lg: var(--space-20);
  --section-xl: var(--space-24);
  --page-margin: 52px;
}

/* ── SEMANTIC RADIUS ── */
:root {
  --radius-button: var(--radius-sm);
  --radius-card:   var(--radius-md);
  --radius-panel:  var(--radius-lg);
}

/* ── RESPONSIVE — TABLET (≤1024px) ── */
@media (max-width: 1024px) {
  :root {
    --page-margin:  32px;
    --size-display: 52px;
    --size-h1:      30px;
    --size-h2:      24px;
    --size-h3:      20px;
    --size-h4:      17px;
    --section-xl:   80px;
    --section-lg:   64px;
  }
}

/* ── RESPONSIVE — TABLET S (≤768px) ── */
@media (max-width: 768px) {
  :root {
    --page-margin:  24px;
    --size-display: 44px;
    --size-h1:      28px;
    --size-h2:      22px;
    --size-h3:      18px;
    --size-h4:      16px;
    --size-body-lg: 17px;
    --size-mono-lg: 14px;
    --size-mono-md: 13px;
    --section-xl:   72px;
    --section-lg:   56px;
    --section-md:   48px;
  }
}

/* ── RESPONSIVE — MOBILE (≤480px) ── */
@media (max-width: 480px) {
  :root {
    --page-margin:  16px;
    --size-display: 36px;
    --size-h1:      26px;
    --size-h2:      20px;
    --size-h3:      17px;
    --size-h4:      15px;
    --size-body-lg: 16px;
    --size-body:    15px;
    --size-body-sm: 13px;
    --size-mono-lg: 13px;
    --size-mono-md: 12px;
    --size-mono-sm: 11px;
    --size-mono-xs: 9px;
    --size-label:   11px;
    --section-xl:   56px;
    --section-lg:   48px;
    --section-md:   40px;
    --section-sm:   32px;
  }
}