/* ==========================================================================
   Tryb4Host v2 — design tokens
   One palette, one type scale, one spacing rhythm. Everything else composes
   from these; no component defines a raw colour of its own.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* --- Brand ------------------------------------------------------------ */
  --brand-50:  #eef4ff;
  --brand-100: #d9e6ff;
  --brand-200: #bcd2ff;
  --brand-300: #8eb4ff;
  --brand-400: #598cff;
  --brand-500: #3164f4;
  --brand-600: #1d47d9;
  --brand-700: #1938ae;
  --brand-800: #1a328a;
  --brand-900: #1b2f6d;

  --accent-400: #2dd4bf;
  --accent-500: #14b8a6;
  --accent-600: #0d9488;

  /* --- Neutrals --------------------------------------------------------- */
  --grey-0:   #ffffff;
  --grey-25:  #fbfcfe;
  --grey-50:  #f6f8fb;
  --grey-100: #eef1f6;
  --grey-200: #e2e7ef;
  --grey-300: #cbd3e0;
  --grey-400: #98a3b8;
  --grey-500: #6b7689;
  --grey-600: #4d5769;
  --grey-700: #364054;
  --grey-800: #212a3d;
  --grey-900: #141c2c;
  --grey-950: #0b111d;

  /* --- Semantic --------------------------------------------------------- */
  --success-50:  #ecfdf3;
  --success-500: #12a150;
  --success-600: #0d8442;
  --warning-50:  #fff8eb;
  --warning-500: #d98c00;
  --warning-600: #b57200;
  --danger-50:   #fef2f2;
  --danger-500:  #d63b3b;
  --danger-600:  #b52a2a;
  --info-50:     #eff6ff;
  --info-500:    #2870d4;

  /* --- Applied surfaces (light) ----------------------------------------- */
  --bg: var(--grey-50);
  --bg-raised: var(--grey-0);
  --bg-sunken: var(--grey-100);
  --bg-inverse: var(--grey-900);
  --bg-brand-soft: var(--brand-50);

  --border: var(--grey-200);
  --border-strong: var(--grey-300);
  --border-brand: var(--brand-200);

  --text: var(--grey-900);
  --text-secondary: var(--grey-600);
  --text-muted: var(--grey-500);
  --text-inverse: var(--grey-0);
  --text-brand: var(--brand-600);

  --focus-ring: 0 0 0 3px rgba(49, 100, 244, 0.28);

  /* --- Elevation -------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.10), 0 4px 8px rgba(16, 24, 40, 0.04);
  --shadow-xl: 0 24px 56px rgba(16, 24, 40, 0.14);

  /* --- Radii ------------------------------------------------------------ */
  --radius-xs: 5px;
  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 15px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* --- Spacing (4pt base) ----------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* --- Type ------------------------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  --font-display: "Plus Jakarta Sans", var(--font-sans);
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
               Consolas, monospace;

  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 2.875rem;
  --text-5xl: 3.5rem;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.022em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;

  /* --- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration: 200ms;
  --duration-slow: 340ms;

  /* --- Layout ----------------------------------------------------------- */
  --container: 1180px;
  --container-wide: 1360px;
  --header-height: 68px;
  --sidebar-width: 260px;
  --sidebar-collapsed: 76px;

  /* --- Stacking order ----------------------------------------------------
     One ordered scale for the whole application. Anything that overlays
     something else takes a token from here rather than inventing a number,
     so "which of these two is on top?" always has a written answer.

     Toasts sit ABOVE modals deliberately: a validation message raised by a
     dialog is useless if the dialog covers it. */
  --z-dropdown: 60;
  --z-tooltip: 70;
  --z-sticky: 80;      /* portal topbar */

  /* The scrim dims what is BEHIND the mobile sidebar, so it has to sit below
     it. Put it above and the backdrop covers the menu it belongs to, silently
     swallowing every tap - the drawer looks open and does nothing. */
  --z-scrim: 85;
  --z-sidebar: 90;

  --z-header: 100;     /* marketing site header */
  --z-modal: 300;
  --z-toast: 400;      /* must clear --z-modal */
  --z-skip-link: 999;
}

/* --- Dark theme ---------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--grey-950);
    --bg-raised: #121a29;
    --bg-sunken: #0d1523;
    --bg-inverse: var(--grey-0);
    --bg-brand-soft: rgba(49, 100, 244, 0.14);

    --border: rgba(148, 163, 184, 0.18);
    --border-strong: rgba(148, 163, 184, 0.3);
    --border-brand: rgba(89, 140, 255, 0.42);

    --text: #eef2f8;
    --text-secondary: #a9b4c7;
    --text-muted: #7f8ba1;
    --text-inverse: var(--grey-900);
    --text-brand: #8eb4ff;

    --success-50: rgba(18, 161, 80, 0.16);
    --warning-50: rgba(217, 140, 0, 0.16);
    --danger-50: rgba(214, 59, 59, 0.16);
    --info-50: rgba(40, 112, 212, 0.16);

    --success-500: #35c97a;
    --warning-500: #f0ad2a;
    --danger-500: #f2635f;
    --info-500: #5b9cf0;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 28px 64px rgba(0, 0, 0, 0.55);

    --focus-ring: 0 0 0 3px rgba(142, 180, 255, 0.35);
  }
}

:root[data-theme="dark"] {
  --bg: var(--grey-950);
  --bg-raised: #121a29;
  --bg-sunken: #0d1523;
  --bg-inverse: var(--grey-0);
  --bg-brand-soft: rgba(49, 100, 244, 0.14);

  --border: rgba(148, 163, 184, 0.18);
  --border-strong: rgba(148, 163, 184, 0.3);
  --border-brand: rgba(89, 140, 255, 0.42);

  --text: #eef2f8;
  --text-secondary: #a9b4c7;
  --text-muted: #7f8ba1;
  --text-inverse: var(--grey-900);
  --text-brand: #8eb4ff;

  --success-50: rgba(18, 161, 80, 0.16);
  --warning-50: rgba(217, 140, 0, 0.16);
  --danger-50: rgba(214, 59, 59, 0.16);
  --info-50: rgba(40, 112, 212, 0.16);

  --success-500: #35c97a;
  --warning-500: #f0ad2a;
  --danger-500: #f2635f;
  --info-500: #5b9cf0;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 28px 64px rgba(0, 0, 0, 0.55);

  --focus-ring: 0 0 0 3px rgba(142, 180, 255, 0.35);
}