/*
 * Paramount design tokens, v1.0 (2026-10-22)
 *
 * Naming rule (see README "Token naming"):
 *   --pm-<hue>-<step>      primitive colour. Never use these in app or component CSS.
 *   --pm-<role>            semantic colour. This is what components and apps use.
 *   --pm-<intent>[-<part>] status colour: success, warning, danger, info.
 *   --pm-<scale>-<step>    everything else: space, text, radius, shadow, duration, z.
 *
 * Brand source: the logo's gradient runs #18EFE4 (cyan) to #12096D (navy), and the
 * wordmark is #414042 (grey) or #12096D (navy). Sampled from the PNGs with Pillow.
 *
 * Theme: light by default; dark follows the OS unless <html data-theme="light|dark"> pins it.
 * Only semantic tokens change between themes. Contrast is checked by tools/contrast.py.
 */

:root {
  /* ---------- Brand (exact logo values) ---------- */
  --pm-brand-cyan: #18efe4;
  --pm-brand-blue: #147da9;   /* gradient midpoint */
  --pm-brand-navy: #12096d;
  --pm-brand-grey: #414042;   /* wordmark grey */
  --pm-brand-gradient: linear-gradient(90deg, #18efe4 0%, #147da9 50%, #12096d 100%);

  /* ---------- Primitives: navy (brand ink) ---------- */
  --pm-navy-50: #f2f1fa;
  --pm-navy-100: #e3e1f4;
  --pm-navy-200: #c6c2e9;
  --pm-navy-300: #a09ad8;
  --pm-navy-400: #7a72c6;
  --pm-navy-500: #554bb0;
  --pm-navy-600: #362b95;
  --pm-navy-700: #221882;
  --pm-navy-800: #12096d;
  --pm-navy-900: #0d0752;
  --pm-navy-950: #080436;

  /* ---------- Primitives: blue (gradient midpoint, the action colour) ---------- */
  --pm-blue-50: #edf7fb;
  --pm-blue-100: #d3ebf5;
  --pm-blue-200: #a6d6ea;
  --pm-blue-300: #6fc0e2;
  --pm-blue-400: #3aa5d1;
  --pm-blue-500: #1a8bbb;
  --pm-blue-600: #147da9;
  --pm-blue-700: #0e6890;
  --pm-blue-800: #0c5374;
  --pm-blue-900: #0a3f59;
  --pm-blue-950: #062a3d;

  /* ---------- Primitives: cyan (accent, never text on light) ---------- */
  --pm-cyan-50: #eafefc;
  --pm-cyan-100: #c8fbf7;
  --pm-cyan-200: #93f7f1;
  --pm-cyan-300: #55f2ea;
  --pm-cyan-400: #18efe4;
  --pm-cyan-500: #12cfc6;
  --pm-cyan-600: #0ea8a1;
  --pm-cyan-700: #0b857f;
  --pm-cyan-800: #096965;
  --pm-cyan-900: #07504d;

  /* ---------- Primitives: grey (biased toward the wordmark's violet grey) ---------- */
  --pm-grey-0: #ffffff;
  --pm-grey-25: #fafafc;
  --pm-grey-50: #f4f4f8;
  --pm-grey-100: #eaeaf0;
  --pm-grey-200: #d9d9e2;
  --pm-grey-300: #bdbdca;
  --pm-grey-400: #9696a8;
  --pm-grey-500: #6f6f83;
  --pm-grey-600: #56556a;
  --pm-grey-700: #414042;
  --pm-grey-800: #2b2a35;
  --pm-grey-850: #1f1e2c;
  --pm-grey-900: #17162a;
  --pm-grey-925: #110f24;
  --pm-grey-950: #0b0a1c;

  /* ---------- Primitives: status hues ---------- */
  --pm-green-50: #ebf8f0;
  --pm-green-100: #cdeeda;
  --pm-green-300: #6fd49c;
  --pm-green-600: #178049;
  --pm-green-700: #12683b;
  --pm-green-950: #0c2a1b;
  --pm-amber-50: #fff6e3;
  --pm-amber-100: #fde9bd;
  --pm-amber-300: #f7c35a;
  --pm-amber-500: #c08408;
  --pm-amber-700: #8a5a03;
  --pm-amber-950: #2d2108;
  --pm-red-50: #fdeeee;
  --pm-red-100: #f9d3d3;
  --pm-red-300: #ff9090;
  --pm-red-600: #c42d2d;
  --pm-red-700: #9f2222;
  --pm-red-950: #341313;

  /* ---------- Semantic colour: LIGHT (default) ---------- */
  --pm-bg: var(--pm-grey-25);
  --pm-surface: var(--pm-grey-0);
  --pm-surface-raised: var(--pm-grey-0);
  --pm-surface-sunken: var(--pm-grey-50);
  --pm-surface-inverse: var(--pm-navy-800);
  --pm-overlay: rgb(11 10 28 / 0.55);

  --pm-text: var(--pm-grey-900);
  --pm-text-muted: var(--pm-grey-600);
  --pm-text-inverse: var(--pm-grey-0);
  --pm-heading: var(--pm-navy-800);
  --pm-link: var(--pm-blue-700);
  --pm-link-hover: var(--pm-navy-800);

  --pm-border: var(--pm-grey-200);
  --pm-border-strong: var(--pm-grey-500);   /* form control edges: 3:1 or more */

  --pm-primary: var(--pm-blue-700);
  --pm-primary-hover: var(--pm-blue-800);
  --pm-on-primary: var(--pm-grey-0);
  --pm-primary-soft: var(--pm-blue-50);
  --pm-primary-text: var(--pm-blue-800);

  --pm-brand: var(--pm-navy-800);           /* nav bar, brand chrome */
  --pm-on-brand: var(--pm-grey-0);
  --pm-accent: var(--pm-cyan-400);          /* decoration only: bars, dots, the gradient */

  --pm-focus: var(--pm-blue-600);
  --pm-focus-halo: var(--pm-cyan-200);
  --pm-selected: var(--pm-blue-50);
  --pm-skeleton: var(--pm-grey-100);
  --pm-skeleton-shine: var(--pm-grey-50);

  --pm-success: var(--pm-green-600);
  --pm-on-success: var(--pm-grey-0);
  --pm-success-soft: var(--pm-green-50);
  --pm-success-text: var(--pm-green-700);
  --pm-success-border: var(--pm-green-300);

  --pm-warning: var(--pm-amber-500);
  --pm-on-warning: var(--pm-grey-950);
  --pm-warning-soft: var(--pm-amber-50);
  --pm-warning-text: var(--pm-amber-700);
  --pm-warning-border: var(--pm-amber-300);

  --pm-danger: var(--pm-red-600);
  --pm-on-danger: var(--pm-grey-0);
  --pm-danger-soft: var(--pm-red-50);
  --pm-danger-text: var(--pm-red-700);
  --pm-danger-border: var(--pm-red-300);

  --pm-info: var(--pm-blue-600);
  --pm-on-info: var(--pm-grey-0);
  --pm-info-soft: var(--pm-blue-50);
  --pm-info-text: var(--pm-blue-800);
  --pm-info-border: var(--pm-blue-300);

  --pm-shadow-color: 18 9 109;  /* navy, as R G B for rgb(var() / a) */

  /* ---------- Theme switches (for logo swaps and inline SVG) ---------- */
  --pm-logo-wordmark: var(--pm-brand-grey);  /* inline SVG wordmark fill */
  --pm-show-on-light: inline-block;          /* .pm-show-light uses this */
  --pm-show-on-dark: none;                   /* .pm-show-dark uses this */

  /* ---------- Typography ---------- */
  --pm-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --pm-font-display: "Montserrat", var(--pm-font-sans);
  --pm-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;

  --pm-text-xs: 0.75rem;     /* 12 */
  --pm-text-sm: 0.875rem;    /* 14 */
  --pm-text-base: 1rem;      /* 16, never smaller for form inputs (iOS zoom) */
  --pm-text-md: 1.125rem;    /* 18 */
  --pm-text-lg: 1.25rem;     /* 20 */
  --pm-text-xl: 1.5rem;      /* 24 */
  --pm-text-2xl: clamp(1.625rem, 1.4rem + 0.9vw, 1.875rem);  /* 26 to 30 */
  --pm-text-3xl: clamp(1.875rem, 1.5rem + 1.6vw, 2.375rem);  /* 30 to 38 */
  --pm-text-4xl: clamp(2.25rem, 1.6rem + 2.8vw, 3.25rem);    /* 36 to 52 */

  --pm-leading-tight: 1.15;
  --pm-leading-snug: 1.3;
  --pm-leading-normal: 1.55;

  --pm-weight-regular: 400;
  --pm-weight-medium: 500;
  --pm-weight-semibold: 600;
  --pm-weight-bold: 700;

  --pm-tracking-caps: 0.08em;
  --pm-tracking-wordmark: 0.3em;
  --pm-measure: 65ch;

  /* ---------- Space (4 px base) ---------- */
  --pm-space-0: 0;
  --pm-space-1: 0.25rem;  /* 4 */
  --pm-space-2: 0.5rem;   /* 8 */
  --pm-space-3: 0.75rem;  /* 12 */
  --pm-space-4: 1rem;     /* 16 */
  --pm-space-5: 1.5rem;   /* 24 */
  --pm-space-6: 2rem;     /* 32 */
  --pm-space-7: 3rem;     /* 48 */
  --pm-space-8: 4rem;     /* 64 */
  --pm-space-9: 6rem;     /* 96 */
  --pm-gutter: max(16px, env(safe-area-inset-left, 0px));

  /* ---------- Size ---------- */
  --pm-tap: 44px;              /* minimum touch target on coarse pointers */
  --pm-control-h: 2.5rem;      /* 40, raised to --pm-tap on touch */
  --pm-control-h-sm: 2rem;
  --pm-control-h-lg: 3rem;
  --pm-container: 72rem;
  --pm-container-narrow: 40rem;

  /* ---------- Radius (small on purpose: the logo is all straight lines) ---------- */
  --pm-radius-sm: 3px;
  --pm-radius-md: 6px;
  --pm-radius-lg: 10px;
  --pm-radius-pill: 999px;

  /* ---------- Border width ---------- */
  --pm-border-width: 1px;
  --pm-border-width-strong: 2px;
  --pm-focus-width: 3px;

  /* ---------- Shadow (navy tinted) ---------- */
  --pm-shadow-sm: 0 1px 2px rgb(var(--pm-shadow-color) / 0.08);
  --pm-shadow-md: 0 2px 4px rgb(var(--pm-shadow-color) / 0.06), 0 6px 16px rgb(var(--pm-shadow-color) / 0.08);
  --pm-shadow-lg: 0 8px 20px rgb(var(--pm-shadow-color) / 0.10), 0 24px 48px rgb(var(--pm-shadow-color) / 0.14);

  /* ---------- Motion ---------- */
  --pm-duration-fast: 120ms;
  --pm-duration-base: 200ms;
  --pm-duration-slow: 320ms;
  --pm-ease: cubic-bezier(0.2, 0, 0, 1);
  --pm-ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* ---------- Z-index ---------- */
  --pm-z-base: 0;
  --pm-z-raised: 10;
  --pm-z-sticky: 100;
  --pm-z-dropdown: 200;
  --pm-z-overlay: 300;
  --pm-z-modal: 400;
  --pm-z-toast: 500;

  /* ---------- Breakpoints (reference only: CSS cannot read variables inside @media) ---------- */
  --pm-bp-sm: 30em;   /* 480: large phones */
  --pm-bp-md: 48em;   /* 768: tablets */
  --pm-bp-lg: 64em;   /* 1024: laptops */
  --pm-bp-xl: 80em;   /* 1280: desktops */

  color-scheme: light;
}

/* ---------- Semantic colour: DARK, following the OS unless data-theme="light" ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pm-bg: var(--pm-grey-950);
    --pm-surface: var(--pm-grey-925);
    --pm-surface-raised: var(--pm-grey-900);
    --pm-surface-sunken: #080716;
    --pm-surface-inverse: var(--pm-grey-50);
    --pm-overlay: rgb(3 2 10 / 0.7);
    --pm-text: #ececf4;
    --pm-text-muted: #a9a9c0;
    --pm-text-inverse: var(--pm-grey-950);
    --pm-heading: #ffffff;
    --pm-link: var(--pm-blue-300);
    --pm-link-hover: var(--pm-cyan-300);
    --pm-border: #2c2b48;
    --pm-border-strong: #77779a;
    --pm-primary: var(--pm-blue-300);
    --pm-primary-hover: var(--pm-blue-200);
    --pm-on-primary: var(--pm-navy-950);
    --pm-primary-soft: #0f2a3c;
    --pm-primary-text: var(--pm-blue-200);
    --pm-brand: var(--pm-grey-925);
    --pm-on-brand: var(--pm-grey-0);
    --pm-accent: var(--pm-cyan-400);
    --pm-focus: var(--pm-cyan-400);
    --pm-focus-halo: #0f3f4a;
    --pm-selected: #13283a;
    --pm-skeleton: #1d1c33;
    --pm-skeleton-shine: #26253f;
    --pm-success: var(--pm-green-300);
    --pm-on-success: var(--pm-grey-950);
    --pm-success-soft: var(--pm-green-950);
    --pm-success-text: var(--pm-green-300);
    --pm-success-border: #24603f;
    --pm-warning: var(--pm-amber-300);
    --pm-on-warning: var(--pm-grey-950);
    --pm-warning-soft: var(--pm-amber-950);
    --pm-warning-text: var(--pm-amber-300);
    --pm-warning-border: #6b5014;
    --pm-danger: var(--pm-red-300);
    --pm-on-danger: var(--pm-grey-950);
    --pm-danger-soft: var(--pm-red-950);
    --pm-danger-text: var(--pm-red-300);
    --pm-danger-border: #7a2c2c;
    --pm-info: var(--pm-blue-300);
    --pm-on-info: var(--pm-grey-950);
    --pm-info-soft: #0f2a3c;
    --pm-info-text: var(--pm-blue-200);
    --pm-info-border: #245a7a;
    --pm-shadow-color: 0 0 0;
    --pm-logo-wordmark: #ffffff;
    --pm-show-on-light: none;
    --pm-show-on-dark: inline-block;
    color-scheme: dark;
  }
}

/* ---------- Semantic colour: DARK, pinned by data-theme="dark" (keep identical to the block above) ----------
 * .pm-theme-dark applies the dark palette to one band of a light page (a hero, a footer).
 * Give that element background: var(--pm-bg) or var(--pm-surface) and color: var(--pm-text). */
:root[data-theme="dark"],
.pm-theme-dark {
  --pm-bg: var(--pm-grey-950);
  --pm-surface: var(--pm-grey-925);
  --pm-surface-raised: var(--pm-grey-900);
  --pm-surface-sunken: #080716;
  --pm-surface-inverse: var(--pm-grey-50);
  --pm-overlay: rgb(3 2 10 / 0.7);
  --pm-text: #ececf4;
  --pm-text-muted: #a9a9c0;
  --pm-text-inverse: var(--pm-grey-950);
  --pm-heading: #ffffff;
  --pm-link: var(--pm-blue-300);
  --pm-link-hover: var(--pm-cyan-300);
  --pm-border: #2c2b48;
  --pm-border-strong: #77779a;
  --pm-primary: var(--pm-blue-300);
  --pm-primary-hover: var(--pm-blue-200);
  --pm-on-primary: var(--pm-navy-950);
  --pm-primary-soft: #0f2a3c;
  --pm-primary-text: var(--pm-blue-200);
  --pm-brand: var(--pm-grey-925);
  --pm-on-brand: var(--pm-grey-0);
  --pm-accent: var(--pm-cyan-400);
  --pm-focus: var(--pm-cyan-400);
  --pm-focus-halo: #0f3f4a;
  --pm-selected: #13283a;
  --pm-skeleton: #1d1c33;
  --pm-skeleton-shine: #26253f;
  --pm-success: var(--pm-green-300);
  --pm-on-success: var(--pm-grey-950);
  --pm-success-soft: var(--pm-green-950);
  --pm-success-text: var(--pm-green-300);
  --pm-success-border: #24603f;
  --pm-warning: var(--pm-amber-300);
  --pm-on-warning: var(--pm-grey-950);
  --pm-warning-soft: var(--pm-amber-950);
  --pm-warning-text: var(--pm-amber-300);
  --pm-warning-border: #6b5014;
  --pm-danger: var(--pm-red-300);
  --pm-on-danger: var(--pm-grey-950);
  --pm-danger-soft: var(--pm-red-950);
  --pm-danger-text: var(--pm-red-300);
  --pm-danger-border: #7a2c2c;
  --pm-info: var(--pm-blue-300);
  --pm-on-info: var(--pm-grey-950);
  --pm-info-soft: #0f2a3c;
  --pm-info-text: var(--pm-blue-200);
  --pm-info-border: #245a7a;
  --pm-shadow-color: 0 0 0;
  --pm-logo-wordmark: #ffffff;
  --pm-show-on-light: none;
  --pm-show-on-dark: inline-block;
  color-scheme: dark;
}