@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------- Design tokens ----------
   Every colour used by the portal comes from here. Light values live on :root; the dark
   theme redefines only the colour tokens, both for the system setting (unless the user
   picked Light) and for an explicit Dark choice. Components never set colours directly. */

/* ---------- Light theme (default) ---------- */
:root {
  color-scheme: light;

  /* Brand navy - sidebar, mobile header, banner. Stays dark in both themes. */
  --navy: #0f172a;
  --navy-soft: #1a2438;
  --navy-line: #243149;
  --navy-rgb: 15 23 42;

  /* Surfaces */
  --bg: #f8fafc;
  --card: #ffffff;
  --card-rgb: 255 255 255;
  --surface-raised: #ffffff;
  --neutral-soft: #f1f5f9;
  --logo-plate: transparent;

  /* Text - all pass WCAG AA (4.5:1) on --card, --bg and --neutral-soft */
  --ink: #0f172a;
  --ink-soft: #334155;
  --muted: #526073;
  --subtle: #8391a5;             /* icons and decorative marks only (3:1), never body text */

  /* Borders */
  --line: #e2e8f0;
  --line-soft: #f1f5f9;
  --line-strong: #cbd5e1;

  /* Accent: --accent for text/icons/links, --accent-bg for filled buttons */
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-bg: #2563eb;
  --accent-bg-hover: #1d4ed8;
  --accent-ink: #ffffff;
  --accent-rgb: 37 99 235;
  --accent-soft: #eff6ff;
  --accent-soft-strong: #dbeafe;
  --accent-line: #bfdbfe;
  --chart-mark: #2563eb;          /* chart bars/lines: the accent, validated for marks (dataviz) */
  --focus-ring: #2563eb;

  /* Status colours: text/icon value + soft background + border */
  --ok: #15803d;
  --ok-soft: #f0fdf4;
  --ok-line: #bbf7d0;
  --warn: #b45309;
  --warn-soft: #fffbeb;
  --warn-line: #fde68a;
  --err: #c21f1f;
  --err-soft: #fef2f2;
  --err-line: #fca5a5;
  --err-bg: #dc2626;             /* filled danger buttons (white text) */
  --info: #0369a1;
  --info-soft: #e0f2fe;
  --violet: #6d28d9;
  --violet-soft: #f3e8ff;
  --rose: #be123c;
  --rose-soft: #ffe4e6;
  --orange: #9a4d0f;
  --orange-soft: #fdeee0;
  --live: #4ade80;               /* "online" dot on the navy banner */
  --live-soft: rgba(34, 197, 94, 0.2);
  --live-line: rgba(74, 222, 128, 0.3);
  --on-accent-chip: rgba(15, 23, 42, 0.3);   /* count chip on an accent-filled item */

  /* Text and fills that sit on the navy sidebar / blue banner (same in both themes) */
  --on-navy: #ffffff;
  --on-navy-soft: #cbd5e1;
  --on-navy-muted: #94a3b8;
  --on-navy-hover: rgba(255, 255, 255, 0.08);
  --on-navy-chip: rgba(255, 255, 255, 0.12);
  --on-navy-chip-hover: rgba(255, 255, 255, 0.2);
  --on-navy-chip-active: rgba(255, 255, 255, 0.28);
  --on-navy-rule: rgba(255, 255, 255, 0.15);
  --banner-from: #1d63ed;
  --banner-to: #0f172a;
  --banner-label: rgba(255, 255, 255, 0.92);   /* 4.6:1 at the light end of the banner gradient */
  --login-shapes-opacity: 1;

  /* Third-party brand marks (fixed by the brand owner, identical in both themes) */
  --ms-red: #f25022;
  --ms-green: #7fba00;
  --ms-blue: #00a4ef;
  --ms-yellow: #ffb900;

  /* Overlays and shadows */
  --overlay: rgba(15, 23, 42, 0.45);
  --shadow-rgb: 15 23 42;
  --tooltip-bg: #0f172a;
  --tooltip-ink: #ffffff;

  /* Typography Font Families */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-heading: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  /* Modular Type Scale (1.25x Ratio) */
  --text-xs: 0.8rem;     /* 12.8px */
  --text-sm: 0.888rem;   /* 14.2px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.25rem;    /* 20px */
  --text-xl: 1.562rem;   /* 25px */
  --text-2xl: 1.953rem;  /* 31.2px */
  --text-3xl: 2.441rem;  /* 39px */

  /* Corner radii (A17): pills/badges 6, buttons/inputs/toasts 8,
     cards/panels/menus 12, dialogs/drawers/banners 14. No pill-shaped buttons. */
  --radius-xs: 4px;    /* tiny inner parts: scrollbar thumb, tag remove "x" */
  --radius-sm: 6px;    /* pills, badges, tags, tooltips, segments inside a group */
  --radius-md: 8px;    /* buttons, inputs, selects, toasts, alerts, menu items */
  --radius-lg: 12px;   /* cards, panels, menus, icon tiles */
  --radius-xl: 14px;   /* dialogs, drawers, login card, home banner */

  /* Spacing scale (A20): every padding, margin and gap uses one of these.
     --space-half is only for hairline insets (pill padding, 2px gaps). */
  --space-half: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Motion & Easing Tokens */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 220ms;
  --duration-slow: 300ms;

  /* Elevation & Shadows (built from --shadow-rgb so they soften in dark mode) */
  --shadow-sm: 0 1px 2px 0 rgb(var(--shadow-rgb) / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(var(--shadow-rgb) / 0.07), 0 2px 4px -2px rgb(var(--shadow-rgb) / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(var(--shadow-rgb) / 0.08), 0 4px 6px -4px rgb(var(--shadow-rgb) / 0.04);
  --shadow-hover: 0 12px 20px -3px rgb(var(--accent-rgb) / 0.12), 0 4px 6px -4px rgb(var(--shadow-rgb) / 0.04);
}

/* ---------- Dark theme: follows the system unless the user chose Light ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --navy: #0b1222;
    --navy-soft: #16203a;
    --navy-line: #25324d;
    --bg: #0a0f1c;
    --card: #111a2c;
    --card-rgb: 17 26 44;
    --surface-raised: #17223a;
    --neutral-soft: #172035;
    --logo-plate: #f8fafc;
    --ink: #e6eaf2;
    --ink-soft: #c8d0dd;
    --muted: #9ba7ba;
    --subtle: #6f7c92;
    --line: #243049;
    --line-soft: #1b2539;
    --line-strong: #34425f;
    --accent: #86a8ff;
    --accent-hover: #a3bdff;
    --accent-bg: #2f5fd8;
    --accent-bg-hover: #3a6ce6;
    --accent-ink: #ffffff;
    --accent-rgb: 96 140 255;
    --accent-soft: rgba(96, 140, 255, 0.14);
    --accent-soft-strong: rgba(96, 140, 255, 0.24);
    --accent-line: rgba(134, 168, 255, 0.4);
    --chart-mark: #5d86f0;        /* one step darker than --accent: passes the mark lightness band */
    --focus-ring: #86a8ff;
    --ok: #6ee7a0;
    --ok-soft: rgba(74, 222, 128, 0.12);
    --ok-line: rgba(74, 222, 128, 0.35);
    --warn: #fbbf5c;
    --warn-soft: rgba(251, 191, 36, 0.12);
    --warn-line: rgba(251, 191, 36, 0.35);
    --err: #fb8a8a;
    --err-soft: rgba(248, 113, 113, 0.12);
    --err-line: rgba(248, 113, 113, 0.4);
    --err-bg: #c53030;
    --info: #6cc6f5;
    --info-soft: rgba(56, 189, 248, 0.13);
    --violet: #c4b1fd;
    --violet-soft: rgba(167, 139, 250, 0.15);
    --rose: #fda4b4;
    --rose-soft: rgba(251, 113, 133, 0.14);
    --orange: #fdba74;
    --orange-soft: rgba(251, 146, 60, 0.14);
    --banner-from: #2352c9;
    --banner-to: #0b1222;
    --overlay: rgba(2, 6, 17, 0.62);
    --login-shapes-opacity: 0.35;
    --shadow-rgb: 0 0 0;
    --tooltip-bg: #e6eaf2;
    --tooltip-ink: #0a0f1c;
  }
}

/* ---------- Dark theme: explicit choice (overrides a light system setting) ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --navy: #0b1222;
  --navy-soft: #16203a;
  --navy-line: #25324d;
  --bg: #0a0f1c;
  --card: #111a2c;
  --card-rgb: 17 26 44;
  --surface-raised: #17223a;
  --neutral-soft: #172035;
  --logo-plate: #f8fafc;
  --ink: #e6eaf2;
  --ink-soft: #c8d0dd;
  --muted: #9ba7ba;
  --subtle: #6f7c92;
  --line: #243049;
  --line-soft: #1b2539;
  --line-strong: #34425f;
  --accent: #86a8ff;
  --accent-hover: #a3bdff;
  --accent-bg: #2f5fd8;
  --accent-bg-hover: #3a6ce6;
  --accent-ink: #ffffff;
  --accent-rgb: 96 140 255;
  --accent-soft: rgba(96, 140, 255, 0.14);
  --accent-soft-strong: rgba(96, 140, 255, 0.24);
  --accent-line: rgba(134, 168, 255, 0.4);
  --chart-mark: #5d86f0;
  --focus-ring: #86a8ff;
  --ok: #6ee7a0;
  --ok-soft: rgba(74, 222, 128, 0.12);
  --ok-line: rgba(74, 222, 128, 0.35);
  --warn: #fbbf5c;
  --warn-soft: rgba(251, 191, 36, 0.12);
  --warn-line: rgba(251, 191, 36, 0.35);
  --err: #fb8a8a;
  --err-soft: rgba(248, 113, 113, 0.12);
  --err-line: rgba(248, 113, 113, 0.4);
  --err-bg: #c53030;
  --info: #6cc6f5;
  --info-soft: rgba(56, 189, 248, 0.13);
  --violet: #c4b1fd;
  --violet-soft: rgba(167, 139, 250, 0.15);
  --rose: #fda4b4;
  --rose-soft: rgba(251, 113, 133, 0.14);
  --orange: #fdba74;
  --orange-soft: rgba(251, 146, 60, 0.14);
  --banner-from: #2352c9;
  --banner-to: #0b1222;
  --overlay: rgba(2, 6, 17, 0.62);
  --login-shapes-opacity: 0.35;
  --shadow-rgb: 0 0 0;
  --tooltip-bg: #e6eaf2;
  --tooltip-ink: #0a0f1c;
}

/* ---------- Light theme: explicit choice (overrides a dark system setting) ---------- */
:root[data-theme="light"] {
  color-scheme: light;
}