/* ============================================================
   AIprepX — unified design tokens (v2 polish)
   Single source of truth. Every surface consumes from here.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;450;500;550;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Brand (constant across themes) ---- */
  --brand-deep:   #1E2A7A;   /* deep indigo — logo X */
  --brand:        #3B5BDB;   /* primary blue */
  --brand-600:    #2F48C3;
  --brand-400:    #6B85E8;
  --brand-200:    #BCC8F4;
  --accent:       #4DB8E0;   /* cyan — brain circuits */
  --accent-600:   #2E9DC8;
  --accent-200:   #B7E2F1;

  /* gradient that defines the brand */
  --grad-brand:   linear-gradient(135deg, #1E2A7A 0%, #3B5BDB 55%, #4DB8E0 100%);
  --grad-soft:    linear-gradient(135deg, rgba(30,42,122,.06), rgba(77,184,224,.10));

  /* semantic */
  --success:      #0a7a3f;
  --success-soft: #e6f9ee;
  --success-line: #b4ebc6;
  --warn:         #a86b00;
  --warn-soft:    #fff7e0;
  --warn-line:    #f2d98e;
  --danger:       #c0392b;
  --danger-soft:  #fdecec;
  --danger-line:  #f6c2c2;

  /* ---- Type scale ---- */
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif:   'Instrument Serif', Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-1:  11px;   /* mono labels */
  --fs-2:  12.5px; /* small text */
  --fs-3:  13.5px; /* secondary body */
  --fs-4:  15px;   /* body */
  --fs-5:  17px;   /* lead */
  --fs-6:  20px;   /* h4 */
  --fs-7:  24px;   /* h3 */
  --fs-8:  32px;   /* h2 */
  --fs-9:  44px;   /* h1 */
  --fs-10: 64px;   /* display */

  /* ---- Spacing (4px base, 8 stops) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 56px; --s-10: 80px;

  /* ---- Radius ---- */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Motion ---- */
  --t-fast: 120ms cubic-bezier(.4,.0,.2,1);
  --t-base: 180ms cubic-bezier(.4,.0,.2,1);
  --t-slow: 320ms cubic-bezier(.4,.0,.2,1);

  /* ---- z-stack ---- */
  --z-base: 1; --z-elev: 10; --z-nav: 50; --z-overlay: 100; --z-modal: 200; --z-toast: 300;
}

/* ===== Light theme (default) ===== */
:root, [data-theme="light"] {
  --bg:           #f6f7fb;
  --bg-canvas:    #ffffff;     /* page surface where content sits */
  --bg-elev:      #ffffff;     /* cards */
  --bg-sunken:    #eef0f7;     /* inputs, recessed */
  --bg-tint:      #e7ecff;     /* hover tint */
  --bg-tint-2:    rgba(77,184,224,.10);

  --ink:          #0d1228;
  --ink-2:        #2b3150;
  --ink-3:        #5b6381;
  --ink-mute:     #8b91ad;

  --line:         rgba(30,42,122,0.10);
  --line-2:       rgba(30,42,122,0.18);
  --line-strong:  rgba(30,42,122,0.32);

  --shadow-1: 0 1px 2px rgba(20,30,90,.04), 0 1px 3px rgba(20,30,90,.05);
  --shadow-2: 0 4px 12px rgba(20,30,90,.06), 0 2px 4px rgba(20,30,90,.04);
  --shadow-3: 0 12px 32px rgba(20,30,90,.10), 0 4px 8px rgba(20,30,90,.04);
  --shadow-4: 0 28px 60px rgba(20,30,90,.16), 0 10px 20px rgba(20,30,90,.06);

  --focus: 0 0 0 3px rgba(59,91,219,.28);

  /* component colors that swap per theme */
  --btn-primary-bg:   var(--brand-deep);
  --btn-primary-fg:   #fff;
  --btn-primary-hov:  #14205c;
  --btn-accent-bg:    var(--brand);
  --btn-accent-fg:    #fff;
  --btn-accent-hov:   var(--brand-600);

  --logo-invert: 0;
  --grid-color: rgba(30,42,122,0.06);
}

/* ===== Dark theme ===== */
[data-theme="dark"] {
  --bg:           #07091a;
  --bg-canvas:    #0c1029;     /* main content surface */
  --bg-elev:      #131838;     /* cards */
  --bg-sunken:    #0a0e23;     /* inputs */
  --bg-tint:      #1c2454;
  --bg-tint-2:    rgba(77,184,224,.14);

  --ink:          #f1f3fb;
  --ink-2:        #c8cee8;
  --ink-3:        #8e95b8;
  --ink-mute:     #5a6188;

  --line:         rgba(180,196,255,0.10);
  --line-2:       rgba(180,196,255,0.18);
  --line-strong:  rgba(180,196,255,0.30);

  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 4px 12px rgba(0,0,0,.45);
  --shadow-3: 0 16px 40px rgba(0,0,0,.55);
  --shadow-4: 0 32px 80px rgba(0,0,0,.65);

  --focus: 0 0 0 3px rgba(107,133,232,.45);

  --btn-primary-bg:   var(--accent);
  --btn-primary-fg:   #07091a;
  --btn-primary-hov:  #6dcaee;
  --btn-accent-bg:    var(--brand-400);
  --btn-accent-fg:    #07091a;
  --btn-accent-hov:   #8aa1ee;

  --success-soft: rgba(16,185,129,0.14);
  --success-line: rgba(16,185,129,0.32);
  --success:      #5dd6a0;
  --warn-soft:    rgba(245,158,11,0.14);
  --warn-line:    rgba(245,158,11,0.32);
  --warn:         #f2c66b;
  --danger-soft:  rgba(239,68,68,0.14);
  --danger-line:  rgba(239,68,68,0.32);
  --danger:       #f08a7e;

  --logo-invert: 1;
  --grid-color: rgba(180,196,255,0.05);
}