/* ============================================
   MAE CORTEX — Design Tokens
   ============================================ */

:root {
  /* ===== Accent (Purple — default) ===== */
  --acc-h: 270;
  --acc-s: 0.22;
  --acc: oklch(0.62 var(--acc-s) var(--acc-h));
  --acc-soft: oklch(0.72 0.18 var(--acc-h));
  --acc-bright: oklch(0.78 0.25 var(--acc-h));
  --acc-deep: oklch(0.42 0.18 var(--acc-h));
  --acc-rgb: 124, 58, 237; /* approx for shadows */
  --acc-glow: oklch(0.7 0.3 var(--acc-h) / 0.55);

  /* ===== Button palette — the site's own blue (cyan accent family, hue ~209); matte, gradient ===== */
  --ice-h: 209;
  --ice-frost-1: oklch(0.90 0.06 205);   /* pale brand-cyan top */
  --ice-frost-2: oklch(0.74 0.115 209);  /* brand blue mid */
  --ice-frost-3: oklch(0.60 0.14 213);   /* deeper brand blue bottom */
  --ice-border:  oklch(0.66 0.10 210 / 0.55);
  --ice-ink:     oklch(0.26 0.06 235);   /* deep slate-blue label */
  --ice-spark:   oklch(0.95 0.03 205);   /* faint glint */

  /* ===== Button system — orb (icon) + pill (CTA); accent-driven, single hue knob ===== */
  --btn-h: var(--acc-h);                                 /* hue knob — defaults to accent; override per button */
  --btn-body-1: oklch(0.28 0.05 var(--btn-h) / 0.55);   /* glass top */
  --btn-body-2: oklch(0.15 0.05 var(--btn-h) / 0.72);   /* glass bottom */
  --btn-rim-hi: oklch(0.85 0.15 var(--btn-h));          /* bright luminous edge (top-left) */
  --btn-rim-lo: oklch(0.45 0.10 var(--btn-h) / 0.30);   /* dim edge (bottom-right) */
  --btn-metal-1: oklch(1 0 0);                          /* label highlight (white) */
  --btn-metal-2: oklch(0.93 0.010 var(--btn-h));        /* bright silver mid */
  --btn-metal-3: oklch(0.85 0.014 var(--btn-h));        /* light silver floor — stays near-white */
  --btn-glow: oklch(0.70 0.26 var(--btn-h) / 0.55);     /* ambient glow / light-leak */
  --btn-ice: oklch(0.86 0.07 var(--btn-h));              /* icy highlight tint (default .btn rim) */

  /* ===== Background scale (deep, less pure-black) ===== */
  --bg-0: oklch(0.1 0.025 282);    /* base — deep blue-black */
  --bg-1: oklch(0.13 0.03 282);
  --bg-2: oklch(0.17 0.035 282);
  --bg-3: oklch(0.21 0.04 282);

  /* ===== Surfaces (translucent) ===== */
  --surf-1: oklch(0.17 0.025 280 / 0.55);
  --surf-2: oklch(0.21 0.03 280 / 0.65);
  --surf-3: oklch(0.25 0.035 280 / 0.75);
  --surf-glass: oklch(0.2 0.03 280 / 0.45);
  --hairline: oklch(0.92 0.04 280 / 0.12);
  --hairline-strong: oklch(0.92 0.04 280 / 0.22);

  /* ===== Text — tightened for higher readability ===== */
  --text-1: oklch(0.985 0.006 280);
  --text-2: oklch(0.84 0.018 280);
  --text-3: oklch(0.66 0.022 280);
  --text-4: oklch(0.48 0.022 280);

  /* ===== Type ===== */
  --font-display: "Geist", "Inter Tight", system-ui, sans-serif;
  --font-body: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  --font-editorial: "Instrument Serif", "Times New Roman", serif;

  /* Type scale (fluid) */
  --fs-eyebrow: 0.75rem;
  --fs-body: clamp(0.95rem, 0.85rem + 0.4vw, 1.05rem);
  --fs-lead: clamp(1.1rem, 0.9rem + 0.8vw, 1.4rem);
  --fs-h6: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem);
  --fs-h5: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-h4: clamp(1.6rem, 1.3rem + 1vw, 2.2rem);
  --fs-h3: clamp(2rem, 1.5rem + 1.8vw, 3rem);
  --fs-h2: clamp(2.6rem, 1.8rem + 3vw, 4.5rem);
  --fs-h1: clamp(3.5rem, 2rem + 5vw, 7rem);
  --fs-display: clamp(4.5rem, 2.5rem + 7vw, 10rem);

  /* ===== Spacing ===== */
  --sp-0: 4px;
  --sp-1: 8px;
  --sp-2: 12px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 48px;
  --sp-7: 64px;
  --sp-8: 96px;
  --sp-9: 128px;
  --sp-10: 192px;

  /* Container — fills laptop/desktop screens better */
  --container-max: 1680px;
  --container-pad: clamp(20px, 3.4vw, 72px);

  /* Section padding */
  --section-y: clamp(80px, 10vw, 200px);

  /* ===== Radius ===== */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 16px;
  --r-4: 22px;
  --r-5: 32px;
  --r-pill: 999px;

  /* ===== Shadows / glows ===== */
  --shadow-card: 0 30px 80px -30px rgba(0, 0, 0, 0.6),
    0 4px 20px -8px rgba(0, 0, 0, 0.4);
  --glow-acc-sm: 0 0 24px rgba(var(--acc-rgb), 0.3);
  --glow-acc-md: 0 0 60px rgba(var(--acc-rgb), 0.4);
  --glow-acc-lg: 0 0 140px rgba(var(--acc-rgb), 0.55);

  /* ===== Motion ===== */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 180ms;
  --dur-mid: 320ms;
  --dur-slow: 600ms;
  --dur-page: 700ms;
}

/* ===== Accent variants (tweak-driven) ===== */
[data-accent="cyan"] {
  --acc-h: 210;
  --acc-s: 0.18;
  --acc-rgb: 56, 189, 248;
  --acc: oklch(0.7 0.18 210);
  --acc-soft: oklch(0.78 0.15 210);
  --acc-bright: oklch(0.85 0.2 210);
  --acc-deep: oklch(0.5 0.18 210);
  --acc-glow: oklch(0.8 0.25 210 / 0.55);
}
[data-accent="pink"] {
  --acc-h: 350;
  --acc-s: 0.2;
  --acc-rgb: 244, 63, 127;
  --acc: oklch(0.68 0.22 350);
  --acc-soft: oklch(0.76 0.18 350);
  --acc-bright: oklch(0.82 0.25 350);
  --acc-deep: oklch(0.5 0.2 350);
  --acc-glow: oklch(0.78 0.3 350 / 0.55);
}

/* ===== Light theme ===== */
[data-theme="light"] {
  /* Layered cool-white backgrounds with real separation */
  --bg-0: oklch(0.985 0.004 280);
  --bg-1: oklch(0.96 0.006 280);
  --bg-2: oklch(0.93 0.009 280);
  --bg-3: oklch(0.895 0.013 280);

  /* Surfaces read as crisp cards against the near-white bg */
  --surf-1: oklch(1 0.001 280 / 0.78);
  --surf-2: oklch(0.99 0.004 280 / 0.9);
  --surf-3: oklch(0.985 0.006 280 / 0.98);
  --surf-glass: oklch(1 0.001 280 / 0.65);
  --hairline: oklch(0.28 0.04 280 / 0.13);
  --hairline-strong: oklch(0.28 0.04 280 / 0.22);

  /* Higher-contrast ink for readability */
  --text-1: oklch(0.22 0.03 280);
  --text-2: oklch(0.4 0.03 280);
  --text-3: oklch(0.52 0.028 280);
  --text-4: oklch(0.62 0.025 280);

  /* Tame the neon glow + give cards a soft real shadow on light */
  --acc-glow: oklch(0.6 0.2 var(--acc-h) / 0.28);
  --glow-acc-sm: 0 0 18px rgba(var(--acc-rgb), 0.18);
  --glow-acc-md: 0 0 40px rgba(var(--acc-rgb), 0.22);
  --glow-acc-lg: 0 0 100px rgba(var(--acc-rgb), 0.3);
  --shadow-card: 0 22px 55px -26px rgba(40, 30, 80, 0.3),
    0 4px 16px -8px rgba(40, 30, 80, 0.18);

  /* Buttons on light: graphite label, pale glass, gentler glow.
     (.btn--primary stays dark-glass via its own tokens — intentional, like the reference.) */
  --btn-body-1: oklch(0.99 0.006 var(--btn-h) / 0.85);
  --btn-body-2: oklch(0.94 0.012 var(--btn-h) / 0.92);
  --btn-rim-hi: oklch(0.72 0.13 var(--btn-h));
  --btn-rim-lo: oklch(0.55 0.08 var(--btn-h) / 0.28);
  --btn-metal-1: oklch(0.38 0.03 var(--btn-h));   /* graphite top */
  --btn-metal-2: oklch(0.24 0.035 var(--btn-h));  /* graphite mid */
  --btn-metal-3: oklch(0.34 0.03 var(--btn-h));   /* graphite low */
  --btn-glow: oklch(0.62 0.20 var(--btn-h) / 0.28);
}

/* ===== Type variant (tweak) ===== */
[data-type="editorial"] {
  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font-body: "Geist", system-ui, sans-serif;
}
[data-type="mono"] {
  --font-display: "Geist Mono", ui-monospace, monospace;
  --font-body: "Geist", system-ui, sans-serif;
}

/* ===== Density (tweak) ===== */
[data-density="dense"] {
  --section-y: clamp(56px, 8vw, 120px);
  --container-pad: clamp(16px, 3vw, 48px);
}
[data-density="airy"] {
  --section-y: clamp(120px, 16vw, 240px);
}