/* ==========================================================================
   Exam Insights — Design Tokens
   The single source of truth for colour, type, space, radius, shadow, motion.
   Components must consume semantic tokens (--color-*, --space-*) — never raw
   hex or magic numbers. Primitive ramps below are private to this file.
   ========================================================================== */

:root {
  /* --- Primitive: neutral ink ramp (warm-tinted, paper-friendly) --------- */
  --ink-900: #0b0b0c; /* near-black text */
  --ink-800: #1a1a1e;
  --ink-700: #2a2a2f;
  --ink-600: #44444b;
  --ink-500: #5c5c63; /* muted text — passes 4.5:1 on paper */
  --ink-400: #8a8a91;
  --ink-300: #c7c5bf; /* strong border */
  --ink-200: #e3e1da; /* default border / hairline */
  --ink-100: #ecebe5; /* sunken surface */
  --paper:   #f5f3ef; /* matte off-white page background */
  --white:   #ffffff;

  /* --- Primitive: editorial blue ramp ----------------------------------- */
  --blue-50:  #eef3ff;
  --blue-100: #dde7ff;
  --blue-200: #b9ccff;
  --blue-300: #8daaff;
  --blue-400: #5b82ff;
  --blue-500: #2f5bff; /* accent base — for tints/links on light */
  --blue-600: #1e45e8; /* primary fill — white text passes AA */
  --blue-700: #1736be;
  --blue-800: #122a93;

  /* --- Primitive: status ------------------------------------------------- */
  --red-600:   #d92d20;
  --green-600: #1a9e5c;
  --amber-500: #e0a000;

  /* ======================================================================
     SEMANTIC TOKENS — components use these
     ====================================================================== */

  /* Surfaces & text */
  --color-bg:            var(--paper);
  --color-surface:       var(--white);
  --color-surface-sunken:var(--ink-100);
  --color-surface-alpha: rgba(245, 243, 239, 0.72); /* nav backdrop */
  --color-text:          var(--ink-900);
  --color-text-soft:     var(--ink-700);
  --color-text-muted:    var(--ink-500);
  --color-text-faint:    var(--ink-400);
  --color-text-on-accent:var(--white);

  /* Lines */
  --color-border:        var(--ink-200);
  --color-border-strong: var(--ink-300);

  /* Accent / interactive */
  --color-accent:        var(--blue-600);
  --color-accent-hover:  var(--blue-700);
  --color-accent-active: var(--blue-800);
  --color-accent-soft:   var(--blue-50);
  --color-accent-text:   var(--blue-700); /* blue text on light bg */
  --color-ring:          var(--blue-500);
  --color-ring-soft:     rgba(47, 91, 255, 0.28);

  /* Status */
  --color-danger:   var(--red-600);
  --color-success:  var(--green-600);
  --color-warning:  var(--amber-500);

  /* Hero aurora blob colours (light) */
  --aurora-1: rgba(47, 91, 255, 0.32);
  --aurora-2: rgba(141, 170, 255, 0.30);
  --aurora-3: rgba(30, 69, 232, 0.18);

  /* --- Liquid glass (Apple-style frosted surface) ----------------------- */
  --glass-bg:        rgba(255, 255, 255, 0.50);
  --glass-bg-strong: rgba(255, 255, 255, 0.70);
  --glass-border:    rgba(255, 255, 255, 0.65);
  --glass-sheen:     rgba(255, 255, 255, 0.55);
  --glass-blur:      16px;
  --glass-shadow:    0 14px 40px rgba(11, 11, 12, 0.10);
  --glass-inset:     inset 0 1px 0 rgba(255, 255, 255, 0.80);

  /* --- Ambient background orbs (drift behind everything) ---------------- */
  --orb-1: rgba(47, 91, 255, 0.46);   /* accent blue   */
  --orb-2: rgba(124, 92, 255, 0.36);  /* indigo/violet */
  --orb-3: rgba(45, 198, 196, 0.30);  /* teal          */
  --orb-4: rgba(141, 170, 255, 0.40); /* soft sky      */
  --orb-opacity: 0.62;

  /* ======================================================================
     TYPOGRAPHY
     ====================================================================== */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* Fluid type scale — base 16px, editorial display jumps */
  --text-xs:  0.75rem;   /* 12 */
  --text-sm:  0.875rem;  /* 14 */
  --text-base:1rem;      /* 16 */
  --text-md:  1.125rem;  /* 18 */
  --text-lg:  1.25rem;   /* 20 */
  --text-xl:  clamp(1.375rem, 1.2rem + 0.8vw, 1.625rem);  /* 22 → 26 */
  --text-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);    /* 28 → 36 */
  --text-3xl: clamp(2.25rem, 1.7rem + 2.6vw, 3rem);       /* 36 → 48 */
  --text-4xl: clamp(2.75rem, 1.9rem + 4vw, 4rem);         /* 44 → 64 */
  --text-display: clamp(3rem, 1.8rem + 6vw, 5.5rem);      /* hero */

  --leading-none:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow:0.12em;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ======================================================================
     SPACING — 4px base, 8pt rhythm
     ====================================================================== */
  --space-0:  0;
  --space-1:  0.25rem; /* 4  */
  --space-2:  0.5rem;  /* 8  */
  --space-3:  0.75rem; /* 12 */
  --space-4:  1rem;    /* 16 */
  --space-5:  1.25rem; /* 20 */
  --space-6:  1.5rem;  /* 24 */
  --space-8:  2rem;    /* 32 */
  --space-10: 2.5rem;  /* 40 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */
  --space-20: 5rem;    /* 80 */
  --space-24: 6rem;    /* 96 */
  --space-32: 8rem;    /* 128 */

  /* Section rhythm (responsive vertical padding) */
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* ======================================================================
     RADIUS
     ====================================================================== */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-2xl: 36px;
  --radius-full:999px;

  /* ======================================================================
     SHADOW — matte: soft, diffuse, low-contrast (no harsh drops)
     ====================================================================== */
  --shadow-xs: 0 1px 2px rgba(11, 11, 12, 0.04);
  --shadow-sm: 0 2px 8px rgba(11, 11, 12, 0.05);
  --shadow-md: 0 8px 24px rgba(11, 11, 12, 0.07);
  --shadow-lg: 0 20px 48px rgba(11, 11, 12, 0.10);
  --shadow-xl: 0 32px 64px rgba(11, 11, 12, 0.12);
  --shadow-focus: 0 0 0 4px var(--color-ring-soft);

  /* ======================================================================
     MOTION
     ====================================================================== */
  --ease-out:    cubic-bezier(0.22, 0.8, 0.28, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 320ms;

  /* ======================================================================
     LAYOUT
     ====================================================================== */
  --container:      1120px;
  --container-wide: 1320px;
  --container-text: 720px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
  --nav-height: 76px;

  /* ======================================================================
     Z-INDEX SCALE
     ====================================================================== */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  20;
  --z-nav:     40;
  --z-overlay: 100;
  --z-modal:   110;
  --z-toast:   1000;
}

/* ==========================================================================
   DARK MODE — designed in parallel, not inverted. Blue lightens for contrast.
   ========================================================================== */
[data-theme="dark"] {
  --color-bg:            #0c0d10;
  --color-surface:       #16181d;
  --color-surface-sunken:#101216;
  --color-surface-alpha: rgba(12, 13, 16, 0.72);
  --color-text:          #f4f4f6;
  --color-text-soft:     #d6d6db;
  --color-text-muted:    #9a9aa2; /* secondary ≥3:1 on dark */
  --color-text-faint:    #6e6e76;
  --color-text-on-accent:#ffffff;

  --color-border:        #262a31;
  --color-border-strong: #353a43;

  --color-accent:        var(--blue-500);
  --color-accent-hover:  var(--blue-400);
  --color-accent-active: var(--blue-300);
  --color-accent-soft:   rgba(47, 91, 255, 0.16);
  --color-accent-text:   var(--blue-300);
  --color-ring:          var(--blue-400);
  --color-ring-soft:     rgba(91, 130, 255, 0.34);

  --aurora-1: rgba(47, 91, 255, 0.42);
  --aurora-2: rgba(91, 130, 255, 0.30);
  --aurora-3: rgba(141, 170, 255, 0.22);

  /* Liquid glass — dark: lift a translucent dark surface, faint bright edge */
  --glass-bg:        rgba(26, 28, 36, 0.55);
  --glass-bg-strong: rgba(26, 28, 36, 0.74);
  --glass-border:    rgba(255, 255, 255, 0.12);
  --glass-sheen:     rgba(255, 255, 255, 0.07);
  --glass-shadow:    0 16px 48px rgba(0, 0, 0, 0.50);
  --glass-inset:     inset 0 1px 0 rgba(255, 255, 255, 0.12);

  /* Ambient orbs — richer on dark */
  --orb-1: rgba(47, 91, 255, 0.58);
  --orb-2: rgba(124, 92, 255, 0.50);
  --orb-3: rgba(45, 198, 196, 0.38);
  --orb-4: rgba(91, 130, 255, 0.50);
  --orb-opacity: 0.82;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 32px 64px rgba(0, 0, 0, 0.60);
}