/* ==========================================================================
   Moniic Relay — design tokens (v2 · "liquid glass")
   Plain CSS custom properties. Load before relay.css.
   Light (frosted) is the default; dark (the hero) applies via
   [data-theme="dark"] on <html>. CSP-safe: no fonts to fetch, no images —
   the ambient background and every sheen are pure CSS gradients.
   ========================================================================== */

/* ---- Fonts -------------------------------------------------------------
   Exactly the stacks live Relay uses today (relay.moniic.com/static/styles.css
   and direct.css, release 20261006-fix1). System fonts only: no @font-face,
   no font files, nothing to download.
   ------------------------------------------------------------------------ */

:root {
  /* ---- Type families (copied exactly from live Relay) -------------------- */
  --font-sans: "Segoe UI", Arial, sans-serif;            /* styles.css :root (main console) */
  --font-display: "Segoe UI", Arial, sans-serif;         /* same family; display = weight + tight tracking, as live */
  --font-mono: ui-monospace, Menlo, Consolas, monospace; /* direct.css .document-status */
  /* Live deep pages (direct.html, email.html) use `system-ui, sans-serif`.
     The redesign folds those pages into the console, so one stack is used. */

  /* ---- Type scale (px-based for a dense console; 14px body) ------------- */
  --text-2xs: 11px;  --lh-2xs: 16px;   /* overlines, kbd */
  --text-xs: 12px;   --lh-xs: 16px;    /* meta, captions, pills */
  --text-sm: 13px;   --lh-sm: 20px;    /* table cells, secondary */
  --text-md: 14px;   --lh-md: 22px;    /* body default */
  --text-lg: 16px;   --lh-lg: 24px;    /* card titles */
  --text-xl: 20px;   --lh-xl: 28px;    /* section titles */
  --text-2xl: 28px;  --lh-2xl: 34px;   /* page titles (display: bold, tight) */
  --text-3xl: 36px;  --lh-3xl: 40px;   /* big numbers / greeting */
  --text-4xl: 56px;  --lh-4xl: 56px;   /* sign-in wordmark */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-display: 650;               /* live headings use 600–650 */
  --tracking-display: -0.04em;         /* live h1: -.045em; wordmark: -.065em */
  --tracking-tight: -0.011em;
  --tracking-overline: 0.08em;

  /* ---- Spacing (4px base) ----------------------------------------------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  /* ---- Radii (generous, glass) ------------------------------------------ */
  --radius-xs: 6px;    /* kbd, tiny tags */
  --radius-sm: 10px;   /* inputs, small wells */
  --radius-md: 14px;   /* menus, nested cards, banners */
  --radius-lg: 20px;   /* cards, panels */
  --radius-xl: 24px;   /* modals, palette */
  --radius-pill: 999px;/* buttons, pills, chips */

  /* ---- Layout ----------------------------------------------------------- */
  --sidebar-w: 252px;
  --topbar-h: 60px;
  --content-max: 1280px;
  --panel-w: 360px;

  /* ---- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-spring: cubic-bezier(.2, 1.2, .3, 1);
  --dur-fast: 140ms;
  --dur: 200ms;
  --dur-slow: 280ms;
  --lift: translateY(-2px);
  --press: scale(0.97);

  /* ---- Glass physics ---------------------------------------------------- */
  --blur: 24px;
  --blur-strong: 28px;
  --saturate: 170%;

  /* ---- Z layers --------------------------------------------------------- */
  --z-sticky: 10;
  --z-pop: 50;
  --z-overlay: 100;
  --z-modal: 110;
  --z-toast: 120;

  /* ======================================================================
     COLOUR — LIGHT ("frosted")
     ====================================================================== */
  color-scheme: light;

  /* Brand primitives */
  --navy-950: #071433;
  --navy-900: #0B1F4B;  /* Moniic navy */
  --navy-800: #13306B;
  --blue-600: #2453D6;
  --blue-500: #3B6BF0;
  --blue-300: #9DB6FA;
  --blue-100: #E6EDFF;
  --violet-500: #7C4DFF;
  --cyan-400: #22D3EE;
  --teal-400: #2DD4BF;

  /* Shiny primary: electric blue → violet (white text ≥ 5:1 at both ends) */
  --grad-primary: linear-gradient(135deg, #2F5FEA 0%, #5B4BF0 55%, #6C3CF0 100%);
  --grad-primary-hover: linear-gradient(135deg, #3A6BFF 0%, #6655FF 55%, #7A47FF 100%);
  --glow-primary: 0 10px 28px -10px rgba(84, 76, 255, 0.75);
  --grad-danger: linear-gradient(180deg, #D2382E 0%, #A81E14 100%);
  --glow-danger: 0 10px 26px -10px rgba(210, 56, 46, 0.8);
  --grad-text: linear-gradient(100deg, #2F5FEA 0%, #6C3CF0 100%);

  /* Ambient background (CSS gradients only) */
  --bg-a: #EDF1FB;
  --bg-b: #E4E9F8;
  --blob-blue: rgba(59, 107, 240, 0.30);
  --blob-violet: rgba(124, 77, 255, 0.22);
  --blob-cyan: rgba(34, 211, 238, 0.22);
  --blob-teal: rgba(45, 212, 191, 0.16);

  /* Glass surfaces */
  --glass: rgba(255, 255, 255, 0.62);          /* cards, columns */
  --glass-strong: rgba(255, 255, 255, 0.86);   /* dense text: tables, thread, side panel */
  --glass-modal: rgba(255, 255, 255, 0.92);    /* modals, palette, menus: serious + readable */
  --glass-bar: rgba(255, 255, 255, 0.58);      /* top bar */
  --glass-solid: #F7F9FE;                      /* fallback without backdrop-filter */
  --glass-edge: rgba(255, 255, 255, 0.70);     /* 1px rim */
  --glass-edge-2: rgba(16, 28, 72, 0.07);      /* outer hairline for definition on light */
  --glass-hi: rgba(255, 255, 255, 0.95);       /* top inner highlight */
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 90px);
  --gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.12) 60%, rgba(255, 255, 255, 0) 100%);
  --gloss-hi: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --gloss-btn: linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.05) 48%, rgba(255, 255, 255, 0) 52%); /* subtle: never washes out a solid colour */
  --glass-shadow: 0 1px 1px rgba(16, 24, 64, 0.04), 0 12px 32px -14px rgba(16, 24, 64, 0.22), 0 2px 6px -2px rgba(16, 24, 64, 0.06);
  --glass-shadow-lift: 0 2px 2px rgba(16, 24, 64, 0.04), 0 22px 44px -16px rgba(16, 24, 64, 0.30);

  /* Surfaces (nested, no blur) */
  --bg: var(--bg-a);
  --surface: rgba(255, 255, 255, 0.82);   /* nested cards, inputs, bubbles */
  --surface-2: rgba(255, 255, 255, 0.55); /* table headers, wells */
  --surface-3: rgba(16, 28, 72, 0.06);    /* hover, segmented track */
  --surface-inverse: rgba(12, 18, 42, 0.90);
  --overlay: rgba(10, 18, 48, 0.36);

  /* Ink (text) — AA on --glass over the ambient background (checked) */
  --ink: #0E1A33;
  --ink-2: #3F4A63;
  --ink-3: #515C76;
  --ink-disabled: #8C95AA;
  --ink-inverse: #FFFFFF;
  --ink-link: #2147C9;

  /* Lines */
  --border: rgba(16, 28, 72, 0.10);
  --border-strong: rgba(16, 28, 72, 0.20);
  --divider: rgba(16, 28, 72, 0.07);

  /* Accent (interactive) */
  --accent: #2F5FEA;
  --accent-ink: #FFFFFF;
  --accent-soft: rgba(47, 95, 234, 0.12);
  --accent-soft-ink: #1C3FA8;
  --accent-line: rgba(47, 95, 234, 0.32);
  --focus: #3B6BF0;
  --focus-ring: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 4px var(--focus), 0 0 18px 2px rgba(59, 107, 240, 0.35);

  /* Semantic: success / warning / danger / info / test / attention.
     *-soft are opaque on light so text contrast never depends on what's behind. */
  --success: #0B6E46;  --success-soft: #E3F4EB;  --success-line: #A9DCC3;
  --warning: #8A4F00;  --warning-soft: #FFF1D6;  --warning-line: #F1CF8E;
  --danger:  #B42318;  --danger-soft:  #FDE9E7;  --danger-line:  #F3B9B2;
  --info:    #1B4FC0;  --info-soft:    #E7EEFE;  --info-line:    #BCCFF8;
  --test:    #6532C8;  --test-soft:    #F0E9FE;  --test-line:    #D2C1FA;
  --neutral: #3F4A63;  --neutral-soft: #EDF0F6;  --neutral-line: #D3D9E4;
  --attention: #B0360D; --attention-soft: #FFEBE2; --attention-line: #F5C0A9;

  /* Sidebar — deep navy glass in both themes (white Moniic logo stays legible) */
  --rail-glass: linear-gradient(180deg, rgba(11, 31, 75, 0.95) 0%, rgba(17, 22, 74, 0.95) 100%);
  --rail-ink: #EEF2FC;
  --rail-ink-2: #B4C1DE;
  --rail-hover: rgba(255, 255, 255, 0.08);
  --rail-border: rgba(255, 255, 255, 0.10);

  /* Legacy elevation aliases */
  --shadow-xs: 0 1px 2px rgba(16, 24, 64, 0.06);
  --shadow-sm: var(--glass-shadow);
  --shadow-md: var(--glass-shadow-lift);
  --shadow-lg: 0 40px 80px -24px rgba(10, 18, 48, 0.45), 0 8px 24px -8px rgba(10, 18, 48, 0.18);
}

/* ======================================================================
   COLOUR — DARK (the hero)
   ====================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --grad-text: linear-gradient(100deg, #8FB0FF 0%, #C6A8FF 100%);

  --bg-a: #050A1E;
  --bg-b: #0A0C2E;
  --blob-blue: rgba(36, 83, 214, 0.55);
  --blob-violet: rgba(124, 77, 255, 0.40);
  --blob-cyan: rgba(34, 211, 238, 0.24);
  --blob-teal: rgba(45, 212, 191, 0.20);

  /* Tinted glass: a white sheen over a navy tint keeps text AA over bright blobs */
  --glass: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04)), rgba(12, 18, 44, 0.50);
  --glass-strong: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03)), rgba(9, 14, 34, 0.72);
  --glass-modal: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)), rgba(11, 16, 38, 0.88);
  --glass-bar: rgba(8, 12, 32, 0.46);
  --glass-solid: #0E1530;
  --glass-edge: rgba(255, 255, 255, 0.10);
  --glass-edge-2: rgba(0, 0, 0, 0.0);
  --glass-hi: rgba(255, 255, 255, 0.16);
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 90px);
  --gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.02) 60%, rgba(255, 255, 255, 0) 100%);
  --gloss-hi: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.02), 0 18px 40px -18px rgba(0, 0, 0, 0.75), 0 2px 8px -2px rgba(0, 0, 0, 0.35);
  --glass-shadow-lift: 0 28px 56px -20px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(143, 174, 255, 0.10);

  --bg: var(--bg-a);
  --surface: rgba(255, 255, 255, 0.06);
  --surface-2: rgba(255, 255, 255, 0.04);
  --surface-3: rgba(255, 255, 255, 0.08);
  --surface-inverse: rgba(236, 240, 250, 0.94);
  --overlay: rgba(2, 5, 18, 0.58);

  --ink: #EEF1F8;
  --ink-2: #BEC7DA;
  --ink-3: #9CA8C2;
  --ink-disabled: #66718C;
  --ink-inverse: #0E1A33;
  --ink-link: #9DB8FF;

  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.20);
  --divider: rgba(255, 255, 255, 0.07);

  --accent: #7FA2FF;
  --accent-soft: rgba(127, 162, 255, 0.16);
  --accent-soft-ink: #C9D7FF;
  --accent-line: rgba(127, 162, 255, 0.40);
  --focus: #8FAEFF;
  --focus-ring: 0 0 0 2px rgba(5, 10, 30, 0.9), 0 0 0 4px var(--focus), 0 0 20px 2px rgba(143, 174, 255, 0.45);

  /* Dark *-soft are pre-mixed opaque tints (tone at ~16% over deep navy) so pills and
     banners never get lighter when stacked on other glass: contrast stays fixed. */
  --success: #5AD39E;  --success-soft: rgb(24, 47, 66);  --success-line: rgba(90, 211, 158, 0.42);
  --warning: #F5BD5E;  --warning-soft: rgb(48, 44, 55);  --warning-line: rgba(245, 189, 94, 0.42);
  --danger:  #FF8D84;  --danger-soft:  rgb(55, 33, 57);  --danger-line:  rgba(255, 141, 132, 0.48);
  --info:    #9DB8FF;  --info-soft:    rgb(30, 39, 81);  --info-line:    rgba(157, 184, 255, 0.42);
  --test:    #CDB4FF;  --test-soft:    rgb(41, 38, 85);  --test-line:    rgba(205, 180, 255, 0.48);
  --neutral: #BEC7DA;  --neutral-soft: rgb(29, 34, 65);  --neutral-line: rgba(190, 199, 218, 0.26);
  --attention: #FFA27F; --attention-soft: rgb(53, 37, 57); --attention-line: rgba(255, 162, 127, 0.48);

  --rail-glass: linear-gradient(180deg, rgba(10, 18, 52, 0.62) 0%, rgba(8, 12, 36, 0.66) 100%);
  --rail-ink: #EEF2FC;
  --rail-ink-2: #A9B6D4;
  --rail-hover: rgba(255, 255, 255, 0.07);
  --rail-border: rgba(255, 255, 255, 0.08);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 40px 90px -24px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* ---- Fallback: no backdrop-filter → solid, equally readable surfaces ---- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: #F7F9FE; --glass-strong: #FFFFFF; --glass-modal: #FFFFFF; --glass-bar: #EEF2FB; --rail-glass: linear-gradient(180deg, #0B1F4B, #0E1844); }
  [data-theme="dark"] { --glass: #0F1733; --glass-strong: #0C1229; --glass-modal: #0D1430; --glass-bar: #0A1028; --rail-glass: linear-gradient(180deg, #0B1436, #080D26); }
}
/* ---- Users who ask the OS for less transparency get solid surfaces too -- */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: #F7F9FE; --glass-strong: #FFFFFF; --glass-modal: #FFFFFF; --glass-bar: #EEF2FB; --blur: 0px; --blur-strong: 0px; }
  [data-theme="dark"] { --glass: #0F1733; --glass-strong: #0C1229; --glass-modal: #0D1430; --glass-bar: #0A1028; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; --lift: none; --press: none; }
}

/* ---- User switch: Settings > Display > Reduce transparency (relay.transparency) ----
   Same solid tokens as the OS-level fallback, and backdrop blur is removed outright
   so weak PCs don't pay the GPU cost. Set by theme-boot.js on <html data-transparency="reduced">. */
[data-transparency="reduced"] { --glass: #F7F9FE; --glass-strong: #FFFFFF; --glass-modal: #FFFFFF; --glass-bar: #EEF2FB; --blur: 0px; --blur-strong: 0px; --rail-glass: linear-gradient(180deg, #0B1F4B, #0E1844); }
[data-theme="dark"][data-transparency="reduced"] { --glass: #0F1733; --glass-strong: #0C1229; --glass-modal: #0D1430; --glass-bar: #0A1028; --rail-glass: linear-gradient(180deg, #0B1436, #080D26); }
[data-transparency="reduced"] *, [data-transparency="reduced"] *::before, [data-transparency="reduced"] *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }