/* ==========================================================================
   iLearn "Lantern" design tokens — the single source of every colour, size,
   radius, shadow and timing the LMS draws with. Loaded BEFORE styles.css.

   Lantern in six lines (the principles; guardrails are in styles.css):
   1. One brand light: amber is the brand and the ONE primary action per view.
      Text on amber is always ink (--on-accent), never white, in both themes.
   2. Violet (--live*) means "live right now" only: Join, Meet now, LIVE.
   3. Navy-ink neutrals. In dark mode depth comes from 1px borders, the sunken
      canvas and an inset highlight — not from gradients or drop shadows.
   4. States never borrow the brand: success / warning / danger / info each
      have a text colour, a soft wash and (where needed) a solid fill.
      Yellow warning always travels with an alert-triangle icon.
   5. Classes carry identity through the 8 category colours (--cat-1..8),
      applied inline as style="--c:var(--cat-N);--c-soft:var(--cat-N-soft)".
   6. Calm motion from three durations and one easing; reduced motion honoured.

   Rules for this file:
   - :root is the dark theme (the default); :root[data-theme="light"] overrides
     only what differs. theme.js sets data-theme before the first paint.
   - No new hue token without updating this file AND the app constants
     (Flutter) together, so the products cannot drift.
   - Meet (meet.css) maps its own variables onto these values; never @import
     this file across products.
   ========================================================================== */

:root {
  /* ---- Neutrals: navy-ink ramp ---- */
  --bg: #0b1020;
  --bg-sunken: #070b16;          /* reading canvases: mail pane, chat wall, PDF backdrop */
  --surface: #141b2e;
  --surface-2: #1b2338;          /* hover, wells, secondary buttons */
  --surface-3: #232c45;          /* pressed, tracks, neutral badges */
  --surface-overlay: #1d2640;    /* modals, menus, sheets */
  --border: #2a3552;
  --border-strong: #3a4870;
  --field-border: #56699e;       /* inputs, switch tracks, checkbox outlines (3:1) */
  --text: #e8edf7;
  --text-2: #b4bfd8;
  --muted: #8e9bbb;              /* 4.98:1 on surface-3, the worst case */
  --disabled: #5a6788;

  /* ---- Amber ramp (brand) ---- */
  --amber-50: #fff8eb;
  --amber-100: #ffefcc;
  --amber-200: #ffdc94;
  --amber-300: #ffc75a;
  --amber-400: #ffb340;
  --amber-500: #f5a623;
  --amber-600: #e28000;
  --amber-700: #b86200;
  --amber-800: #a35400;
  --amber-900: #6e3900;

  /* ---- The logo's own orange (brand.js / brand.svg only; never for UI) ---- */
  --brand-orange: #f6921e;

  /* ---- Accent roles: fill (shapes) vs text (words) are different tokens ---- */
  --accent-fill: #ffb340;
  --accent-fill-deep: #f59e0b;   /* bottom of the primary gradient */
  --on-accent: #1a1206;          /* ink label on any amber fill */
  --accent-text: #ffc266;        /* links, active labels, small accent text */
  --accent-soft: #ffb34024;
  --accent-line: #ffb34061;

  /* ---- Live (violet): meetings happening now, nothing else ---- */
  --live: #9d87ff;
  --live-fill: #6d4cff;
  --on-live: #ffffff;
  --live-soft: #7c5cff29;

  /* ---- Semantic states: text / soft / fill ---- */
  --success: #4ade80;
  --success-soft: #4ade8024;
  --success-fill: #16a34a;
  --warning: #facc15;
  --warning-soft: #facc1524;
  --danger: #f87171;
  --danger-soft: #f8717124;
  --danger-fill: #dc2626;        /* notification badge, Leave; white text 4.83:1 */
  --info: #60a5fa;
  --info-soft: #60a5fa24;
  --star: #ffc53d;
  --focus-ring: #ffb340;

  /* ---- Conversation bubbles ---- */
  --bubble-in: #1b2338;
  --bubble-out: #3a2814;
  --bubble-out-text: #fff3e6;

  /* ---- Class (category) palette: 8 hues, picked per class by ui.js catIndex() ---- */
  --cat-1: #6ea8ff;  --cat-1-soft: #6ea8ff29;   /* blue */
  --cat-2: #2dd4bf;  --cat-2-soft: #2dd4bf29;   /* teal */
  --cat-3: #5ee08a;  --cat-3-soft: #5ee08a29;   /* green */
  --cat-4: #38bdf8;  --cat-4-soft: #38bdf829;   /* sky */
  --cat-5: #a3e635;  --cat-5-soft: #a3e63529;   /* lime */
  --cat-6: #f472b6;  --cat-6-soft: #f472b629;   /* pink */
  --cat-7: #d6a77a;  --cat-7-soft: #d6a77a29;   /* cocoa */
  --cat-8: #a5b4cc;  --cat-8-soft: #a5b4cc29;   /* slate */

  /* ---- Surfaces: glass, glow, elevation ---- */
  --sidebar: #070b16;                     /* app shell sidebar / rail (= bg-sunken) */
  --glass: rgba(11, 16, 32, 0.72);        /* top bar / phone tab bar only, blur(8px) */
  --glass-solid: rgba(11, 16, 32, 0.94);  /* fallback without backdrop-filter */
  --glow-1: rgba(255, 179, 64, 0.08);     /* the single lantern glow (home + login) */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.45);
  --elev: inset 0 1px 0 rgba(255, 255, 255, 0.04);        /* resting card / panel */
  --elev-hover: inset 0 1px 0 rgba(255, 255, 255, 0.06);  /* hovered card (dark: no lift) */

  /* ---- Radii: only these six ---- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---- Spacing ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---- Type ----
     IBM Plex Sans Arabic sits right after Inter (before the system fonts) so
     Arabic runs get Plex, not whatever the OS falls back to. Its unicode-range
     means it only downloads on pages that actually contain Arabic. */
  --font: 'Inter', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans Arabic', Tahoma, sans-serif;
  --font-display: 'Space Grotesk', 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif;  /* 20px and up only */
  --font-ar: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', Tahoma, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;
  --fs-2xs: 11px;    /* badges, counts, timestamps — the floor, nothing smaller */
  --fs-xs: 12px;     /* meta lines, helper text, table headers */
  --fs-sm: 13px;     /* secondary UI, small buttons, chips */
  --fs-base: 14px;   /* UI body, table cells, buttons */
  --fs-md: 15px;     /* reading text: announcements, chat, mail, protocols */
  --fs-lg: 17px;     /* card, panel and modal titles */
  --fs-xl: 20px;     /* section heads (display face) */
  --fs-2xl: clamp(22px, 1.2vw + 16px, 28px);  /* page h1 (display face) */
  --fs-3xl: clamp(28px, 2vw + 18px, 36px);    /* greeting, stat figures */
  --lh-tight: 1.15;
  --lh-title: 1.3;
  --lh-ui: 1.45;
  --lh-read: 1.6;

  /* ---- Motion ---- */
  --dur-1: 120ms;    /* hover, press, toggles */
  --dur-2: 180ms;    /* menus, toasts, tab underline */
  --dur-3: 260ms;    /* modals, sheets, success moments */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);   /* delight moments only */

  --icon-stroke: 1.75;

  /* ---- Control heights (R-CMP-1): buttons and inputs line up ---- */
  --h-sm: 32px;
  --h-md: 40px;
  --h-lg: 48px;
  --h-touch: 44px;   /* minimum tap target on a coarse pointer */
}

/* ---------- Light theme: its own theme, not dark inverted ----------
   Gold fill with an ink label (the website's gold), deep amber ONLY for links
   and small text, a neutral cool canvas, and real shadows for elevation. */
:root[data-theme="light"] {
  --bg: #f6f7fa;
  --bg-sunken: #eef1f5;
  --surface: #ffffff;
  --surface-2: #f3f5f9;
  --surface-3: #e8ecf2;
  --surface-overlay: #ffffff;
  --border: #dfe4ec;
  --border-strong: #c3cbd8;
  --field-border: #7d8ca3;
  --text: #0f172a;
  --text-2: #334155;
  --muted: #5b6780;
  --disabled: #9aa3b5;

  --accent-fill: #f5a623;
  --accent-fill-deep: #e28000;
  --on-accent: #1a1206;
  --accent-text: #a35400;
  --accent-soft: #f5a62329;
  --accent-line: #e2800059;

  --live: #5b3fd9;
  --live-fill: #5b3fd9;
  --on-live: #ffffff;
  --live-soft: #5b3fd91a;

  --success: #15803d;
  --success-soft: #e8f5ec;
  --success-fill: #16a34a;
  --warning: #a16207;
  --warning-soft: #fdf6dc;
  --danger: #c81e1e;
  --danger-soft: #fdecec;
  --danger-fill: #dc2626;
  --info: #1d63d8;
  --info-soft: #e8f0fd;
  --star: #c27c00;
  --focus-ring: #a35400;   /* a gold ring on white is only 2.03:1 */

  --bubble-in: #ffffff;
  --bubble-out: #fde9cf;
  --bubble-out-text: #0f172a;

  --cat-1: #1d4ed8;  --cat-1-soft: #1d4ed81f;
  --cat-2: #0f766e;  --cat-2-soft: #0f766e1f;
  --cat-3: #15803d;  --cat-3-soft: #15803d1f;
  --cat-4: #0369a1;  --cat-4-soft: #0369a11f;
  --cat-5: #4d7c0f;  --cat-5-soft: #4d7c0f1f;
  --cat-6: #be185d;  --cat-6-soft: #be185d1f;
  --cat-7: #7c4a2d;  --cat-7-soft: #7c4a2d1f;
  --cat-8: #475569;  --cat-8-soft: #4755691f;

  --sidebar: #ffffff;
  --glass: rgba(255, 255, 255, 0.8);
  --glass-solid: rgba(255, 255, 255, 0.94);
  --glow-1: rgba(245, 166, 35, 0.05);
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
  --shadow-2: 0 10px 30px rgba(16, 24, 40, 0.12);
  --shadow-overlay: 0 24px 64px rgba(15, 23, 42, 0.22);
  --elev: var(--shadow-1);
  --elev-hover: var(--shadow-2);
}