/* Wreddi design tokens — the single source of truth for the student-facing pages
   (dashboard, profile, leaderboard, contests, study rooms, assistant, login, register,
   forgot/change password, landing). The admin panel keeps its own palette in admin.html.

   v1.10 — "Apple × Material" hybrid.
     From Apple (iOS 17 / HIG):  grouped surfaces on a light-grey canvas, filled (not inset) form fields,
                                 translucent blurred bars, native system type (SF Pro), springy sheet motion.
     From Material 3:            tonal containers (--brand-lt) for secondary actions and selected states,
                                 layered elevation (--sh*), a pill "active indicator" in the tab bar,
                                 ripple state layers on touch, emphasised easing.

   Token meaning (this replaced the old single-surface neumorphic scheme):
     --bg      page canvas              (grouped background)
     --surf    raised surface           (cards, buttons, list rows, sheets)
     --fill    recessed / filled        (inputs, progress tracks, chips, segmented-control troughs)
     --sh*     elevation, soft & layered (sh-in* are now flat: wells are drawn with --fill, not shadow)
   Light values are in :root, dark-mode overrides in [data-theme=dark]. A page may still declare a token
   that only that page uses; it sits in the page's own <style>, which loads after this file. */

:root {
  /* Surfaces */
  --bg: #f8f8fa;
  --surf: #ffffff;
  --surf2: #f8f8fa;
  --surf3: #ececf0;
  --fill: rgba(120,120,128,.08);
  --fill2: rgba(120,120,128,.15);
  --bar: rgba(255,255,255,.86);          /* translucent tab/top bar (needs backdrop blur) */
  --bar-solid: #ffffff;                  /* same bar where blur is off (low-power / unsupported) */
  --scrim: rgba(0,0,0,.40);
  --inv-bg: rgba(28,28,30,.92);          /* toast / snackbar */
  --inv-fg: #ffffff;
  /* Shadow tints (kept for the few places that use them as hairlines / drops) */
  --sd: rgba(60,60,67,.18);
  --sl: rgba(255,255,255,.80);

  /* Brand + semantic colour */
  --brand: #3E5C8A;
  --brand-dk: #2F4A72;
  --brand-lt: rgba(62,92,138,.08);       /* tonal container */
  --brand-glow: rgba(62,92,138,.24);
  --on-brand: #ffffff;
  --grad: #3E5C8A;   /* primary-action fill (flat in the minimal theme); white text sits on it */
  --ok: #2d9c6e;
  --ok-lt: rgba(45,156,110,.12);
  --ok-bd: rgba(45,156,110,.30);
  --no: #d14545;
  --no-lt: rgba(209,69,69,.12);
  --no-bd: rgba(209,69,69,.30);
  --warn: #c67a1e;
  --warn-lt: rgba(198,122,30,.12);
  --purple: #5D7FB0;
  --purple-lt: rgba(93,127,176,.12);
  --teal: #2d9cb8;
  --teal-lt: rgba(45,156,184,.12);
  --gold: #c79a1e;
  --silver: #8a90a4;
  --bronze: #a86a3a;

  /* Text — Apple label hierarchy */
  --t1: #1c1c1e;
  --t2: #48484a;
  --t3: #6c6c70;
  --t4: #8e8e93;
  --bd: rgba(60,60,67,.10);              /* hairline separators */
  --bd2: rgba(60,60,67,.18);
  --qfont: 16px;

  /* Elevation (Material layering, Apple softness) */
  --sh:    0 0 0 .5px rgba(60,60,67,.12);
  --sh-sm: 0 0 0 .5px rgba(60,60,67,.12);
  --sh-md: 0 0 0 .5px rgba(60,60,67,.10), 0 4px 14px rgba(16,24,40,.06);
  --sh-lg: 0 0 0 .5px rgba(60,60,67,.08), 0 12px 36px rgba(16,24,40,.12);   /* sheets, menus, the tab bar */
  /* Wells are filled, not shadowed. These stay valid box-shadow values so that lists such as
     "var(--sh-in), 0 0 0 2px var(--brand-lt)" in existing rules keep working. */
  --sh-in:    inset 0 0 0 0 transparent;
  --sh-in-sm: inset 0 0 0 0 transparent;
  --sh-in-lg: inset 0 0 0 0 transparent;

  /* Corner radius */
  --r8: 8px;
  --r12: 12px;
  --r16: 16px;
  --r20: 20px;
  --r24: 28px;
  --rpill: 999px;

  /* Type — each platform gets its own system face: SF Pro on iOS/macOS, Roboto on Android,
     Segoe UI on Windows. Nothing to download, which also helps on slow connections. */
  --ff-h: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', Roboto, 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif;
  --ff-b: -apple-system, BlinkMacSystemFont, 'SF Pro Text', Roboto, 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif;

  /* Layout */
  --nav-space: 96px; /* room kept clear at the bottom for the floating tab bar */

  /* Motion */
  --spring: cubic-bezier(.32,1.25,.5,1);
  --ease-s: cubic-bezier(.32,1.25,.5,1);   /* gentle spring: toggles, progress fills */
  --ease-o: cubic-bezier(.2,0,0,1);        /* Material emphasised-decelerate */
  --ease:   cubic-bezier(.2,0,0,1);
  --ease-sheet: cubic-bezier(.32,.72,0,1); /* iOS sheet curve */
}

[data-theme=dark] {
  /* Surfaces — true-black canvas, #1c1c1e raised surface (Apple dark elevated) */
  --bg: #000000;
  --surf: #141416;
  --surf2: #1c1c1e;
  --surf3: #2c2c2e;
  --fill: rgba(120,120,128,.18);
  --fill2: rgba(120,120,128,.28);
  --bar: rgba(20,20,22,.86);
  --bar-solid: #141416;
  --scrim: rgba(0,0,0,.60);
  --inv-bg: rgba(242,242,247,.94);
  --inv-fg: #1c1c1e;
  --sd: rgba(84,84,88,.55);
  --sl: rgba(255,255,255,.06);

  --brand: #7ba0d8;
  --brand-dk: #a9c3ec;
  --brand-lt: rgba(123,160,216,.13);
  --brand-glow: rgba(123,160,216,.30);
  --on-brand: #0b1626;
  --grad: #4a72ad;   /* deeper than --brand so white text keeps contrast in dark mode */
  --ok: #3dba86;
  --ok-lt: rgba(61,186,134,.16);
  --ok-bd: rgba(61,186,134,.32);
  --no: #ff6b66;
  --no-lt: rgba(255,107,102,.16);
  --no-bd: rgba(255,107,102,.32);
  --warn: #e8a04a;
  --warn-lt: rgba(232,160,74,.16);
  --purple: #8EA9D6;
  --purple-lt: rgba(142,169,214,.16);
  --teal: #4db8d4;
  --teal-lt: rgba(77,184,212,.16);
  --gold: #e8b93a;
  --silver: #a5abc2;
  --bronze: #c47e42;

  --t1: #f5f5f7;
  --t2: #d1d1d6;
  --t3: #a1a1a6;
  --t4: #6e6e73;
  --bd: rgba(84,84,88,.55);
  --bd2: rgba(84,84,88,.75);

  /* Shadows barely read on black, so surfaces are separated by tone and a hairline */
  --sh:    0 0 0 .5px rgba(255,255,255,.08);
  --sh-sm: 0 0 0 .5px rgba(255,255,255,.08);
  --sh-md: 0 0 0 .5px rgba(255,255,255,.09), 0 4px 14px rgba(0,0,0,.5);
  --sh-lg: 0 0 0 .5px rgba(255,255,255,.10), 0 12px 36px rgba(0,0,0,.65);
}