/* ============================================================
   IMS13 Yearbook — Design tokens
   World: minimal white. Liquid Glass buttons + macOS-like chrome.
   All visual decisions flow from these tokens.
   ============================================================ */

:root {
  /* --- Ground & scene --- */
  --bg-0: #f5f5f7;
  --bg-1: #ffffff;
  --bg-2: #eeeef0;

  /* --- Aurora washes (barely-there color behind the glass) --- */
  --aurora-blue: rgba(10, 132, 255, 0.09);
  --aurora-violet: rgba(94, 92, 230, 0.07);
  --aurora-pink: rgba(255, 88, 148, 0.05);
  --aurora-teal: rgba(64, 224, 208, 0.05);

  /* --- Ink --- */
  --ink-hi: #1d1d1f;
  --ink-mid: #48484d;
  --ink-lo: #6e6e73;

  /* --- Accent (clean Apple blue) --- */
  --accent: #0071e3;
  --accent-rgb: 0, 113, 227;
  --accent-soft: rgba(0, 113, 227, 0.1);
  --danger: #d92d3f;
  --warn: #8a6a00;
  --ok: #1e9e63;

  /* --- Liquid Glass material (light surfaces) --- */
  --glass-fill: rgba(255, 255, 255, 0.70);
  --glass-fill-strong: rgba(255, 255, 255, 0.88);
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-edge: rgba(255, 255, 255, 0.75);
  --glass-blur: 20px;
  --glass-saturate: 140%;

  /* --- Neumorphic shadow pairs (soft, diffuse on white) --- */
  --neu-out:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 10px 30px rgba(0, 0, 0, 0.08);
  --neu-inset:
    0 2px 6px rgba(0, 0, 0, 0.07) inset,
    0 -1px 0 rgba(255, 255, 255, 0.8) inset;

  /* --- Skeuomorphic chrome --- */
  --titlebar-hi: rgba(255, 255, 255, 0.65);
  --titlebar-lo: rgba(0, 0, 0, 0.03);
  --tl-close: #ff5f57;
  --tl-min: #febc2e;
  --tl-max: #28c840;

  /* --- Geometry --- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 140ms;
  --t-med: 260ms;
  --t-slow: 520ms;

  /* --- Type --- */
  /* Skeuomorphic macOS: the platform's own face is the subject-correct choice. */
  --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI Variable Text',
    'Segoe UI', Roboto, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI Variable Display',
    'Segoe UI', Roboto, sans-serif;

  /* --- Layering --- */
  --z-aurora: 0;
  --z-content: 10;
  --z-window: 100;
  --z-lightbox: 200;

  /* --- Archive chrome --- */
  --hairline: rgba(0, 0, 0, 0.08);
  --ink-on-accent: #ffffff;
  --display-tracking: -0.055em;
}

[data-theme='dark'] {
  /* --- Ground & scene --- */
  --bg-0: #0a0c14;
  --bg-1: #131728;
  --bg-2: #1b2138;

  /* --- Aurora washes --- */
  --aurora-blue: rgba(10, 132, 255, 0.15);
  --aurora-violet: rgba(94, 92, 230, 0.14);
  --aurora-pink: rgba(255, 88, 148, 0.1);
  --aurora-teal: rgba(64, 224, 208, 0.1);

  /* --- Ink --- */
  --ink-hi: #f5f5f7;
  --ink-mid: #b0b0b8;
  --ink-lo: #787880;

  /* --- Accent --- */
  --accent: #2997ff;
  --accent-rgb: 41, 151, 255;
  --accent-soft: rgba(41, 151, 255, 0.16);

  /* --- Liquid Glass material (dark surfaces) --- */
  --glass-fill: rgba(14, 18, 32, 0.76);
  --glass-fill-strong: rgba(18, 23, 42, 0.92);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-edge: rgba(255, 255, 255, 0.16);

  /* --- Neumorphic shadow pairs (dark) --- */
  --neu-out:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 2px 8px rgba(0, 0, 0, 0.35),
    0 12px 36px rgba(0, 0, 0, 0.55);
  --neu-inset:
    0 2px 6px rgba(0, 0, 0, 0.5) inset,
    0 -1px 0 rgba(255, 255, 255, 0.06) inset;

  /* --- Skeuomorphic chrome --- */
  --titlebar-hi: rgba(255, 255, 255, 0.1);
  --titlebar-lo: rgba(0, 0, 0, 0.35);

  --hairline: rgba(255, 255, 255, 0.12);
  --ink-on-accent: #ffffff;

  /* --- Glass saturate override for dark (less pumped-up) --- */
  --glass-saturate: 120%;

  /* --- Status colors (slightly brighter on dark) --- */
  --ok: #30d158;
  --warn: #ffd60a;
  --danger: #ff453a;
}