/*!
 * Proven design tokens — the ONLY place colours, type, spacing, radii and motion are defined.
 *
 * Direction: calm, tool-like, Acrobat/Prebuilt-Tools-designer feel. Neutral greys, one blue
 * accent, hairline borders, compact type, a grey "workspace" behind document-like content.
 * Everything else (ui5-bridge.css, proven.css, views) reads these variables; never hard-code
 * a colour in a view or component stylesheet.
 *
 * Theme switching: light by default; dark when the OS prefers it, unless the user forced a
 * theme (html[data-proven-theme="light" | "dark"], set by shared/boot.js from localStorage).
 */

:root {
  /* ---- Neutrals -------------------------------------------------------- */
  --pv-bg: #f1f2f4;              /* app background behind cards and panels */
  --pv-surface: #ffffff;         /* cards, panels, header, dialogs */
  --pv-mail-canvas: #f3f4f6;      /* email previews: the email body is always light, in any theme */
  /* Theme previews in Settings → Appearance: the light and dark themes shown literally, in any theme. */
  --pv-swatch-light-bg: #f1f2f4;
  --pv-swatch-light-card: #ffffff;
  --pv-swatch-dark-bg: #1b1d21;
  --pv-swatch-dark-card: #2a2d31;
  --pv-surface-2: #f7f8f9;       /* subtle fills: table headers, hover rows, inset areas */
  --pv-surface-3: #eceef1;       /* pressed / selected-neutral */
  --pv-border: #d9dce1;          /* hairlines */
  --pv-border-strong: #bcc1c8;   /* input borders, dividers that must read */
  --pv-text: #1f2328;
  --pv-text-muted: #51575f;      /* 7.3:1 on surface — WCAG AA */
  --pv-text-faint: #656b75;      /* ≥4.5:1 on surface and bg — WCAG AA for small text */
  --pv-text-on-accent: #ffffff;

  /* ---- Accent & status --------------------------------------------------- */
  --pv-accent: #2563eb;
  --pv-accent-default: #2563eb; /* Proven blue, unaffected by a tenant brand colour (brand presets) */
  --pv-accent-hover: #1d4ed8;
  --pv-accent-active: #1e40af;
  --pv-accent-soft: #eaf0fe;     /* selected rows, active nav item, focus halos */
  --pv-accent-soft-2: #d5e1fd;
  --pv-focus-ring: 0 0 0 3px rgba(37, 99, 235, .28);

  --pv-danger: #b42318;
  --pv-danger-soft: #fef3f2;
  --pv-warn: #b54708;
  --pv-warn-soft: #fffaeb;
  --pv-ok: #067647;
  --pv-ok-soft: #ecfdf3;
  --pv-info: var(--pv-accent);
  --pv-info-soft: var(--pv-accent-soft);

  /* ---- Data colours (D-152): charts, KPI tiles, kinds of links. Calm, distinct, colour-blind-safe order. ---- */
  --pv-violet: #7c3aed;
  --pv-violet-soft: #f3effe;
  --pv-teal: #0f8a7e;
  --pv-teal-soft: #e6f6f4;
  --pv-amber: #c2620a;
  --pv-amber-soft: #fef4e6;
  --pv-rose: #d0264f;
  --pv-rose-soft: #fdeef2;
  --pv-chart-1: var(--pv-accent);
  --pv-chart-2: var(--pv-teal);
  --pv-chart-3: var(--pv-violet);
  --pv-chart-4: var(--pv-amber);
  --pv-chart-5: var(--pv-rose);
  --pv-chart-grid: #e7e9ed;
  /* The main menu: a quiet surface with a hint of the accent at the top, where the logo sits. */
  --pv-nav-bg: #fbfbfc;
  --pv-nav-glow: #eef3fe;
  /* Behind an organisation's logo: none in light mode; a light plate in dark mode (logos are made for light). */
  --pv-logo-plate: transparent;

  /* Workspace behind "document" content (exam preview, certificate preview). */
  --pv-canvas: #8f959d;
  --pv-page-shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 10px 30px rgba(0, 0, 0, .22);

  /* ---- Elevation ----------------------------------------------------------- */
  --pv-shadow-0: none;
  --pv-shadow-1: 0 1px 2px rgba(16, 24, 40, .05);
  --pv-shadow-2: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  --pv-shadow-pop: 0 12px 32px rgba(16, 24, 40, .14), 0 2px 6px rgba(16, 24, 40, .06);

  /* ---- Shape ----------------------------------------------------------------- */
  --pv-radius-sm: 4px;
  --pv-radius: 6px;
  --pv-radius-lg: 10px;
  --pv-radius-pill: 999px;

  /* ---- Type ------------------------------------------------------------------ */
  --pv-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pv-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --pv-fs-xs: 0.6875rem;   /* 11px — uppercase section labels */
  --pv-fs-sm: 0.75rem;     /* 12px — meta, captions */
  --pv-fs-md: 0.8125rem;   /* 13px — dense UI (toolbars, tables) */
  --pv-fs-base: 0.875rem;  /* 14px — body */
  --pv-fs-lg: 1rem;        /* 16px */
  --pv-fs-xl: 1.25rem;     /* 20px — page titles */
  --pv-fs-2xl: 1.625rem;   /* 26px — hero / empty-state titles */
  --pv-fs-3xl: 2.25rem;    /* 36px — landing hero only */
  --pv-fw-regular: 400;
  --pv-fw-medium: 500;
  --pv-fw-semibold: 600;
  --pv-lh-tight: 1.25;
  --pv-lh: 1.5;
  --pv-tracking-label: .06em;

  /* ---- Space (4px grid) -------------------------------------------------------- */
  --pv-space-1: 4px;
  --pv-space-2: 8px;
  --pv-space-3: 12px;
  --pv-space-4: 16px;
  --pv-space-5: 20px;
  --pv-space-6: 24px;
  --pv-space-8: 32px;
  --pv-space-10: 40px;
  --pv-space-12: 48px;

  /* ---- Layout ------------------------------------------------------------------- */
  /* Golden-ratio rhythm (D-152): header 64 → logo 40 (64/φ) → menu row 40 → icon tile 24 (40/φ); menu 260 ≈ 160·φ. */
  --pv-header-h: 64px;
  --pv-sidenav-w: 260px;
  --pv-logo-h: 40px;
  --pv-nav-item-h: 40px;
  --pv-subnav-w: 232px;       /* Settings: second menu beside the main one */
  --pv-inspector-w: 320px;
  --pv-content-max: 1200px;
  --pv-control-h: 32px;      /* inputs, buttons (touch / cozy) */
  --pv-control-h-compact: 28px; /* inputs, buttons on desktop (compact density) */
  --pv-control-h-lg: 40px;   /* exam runner, sign-in */
  --pv-field-h: 32px;        /* every control — inputs, selects, dates, steppers, buttons, switches (D-154) */

  /* ---- Motion ------------------------------------------------------------------- */
  --pv-ease: cubic-bezier(.2, 0, 0, 1);
  --pv-dur-fast: 120ms;
  --pv-dur: 200ms;

  color-scheme: light;
  /* The public pages (home, sign in, setup — D-166/D-167/D-168): Proven blue on a cool paper, navy ink, sky,
     teal and violet accents with a little sun for warmth, and a display serif. Used through shared/theme/public.css. */
  --pv-public-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --pv-public-paper: #f3f7fd;
  --pv-public-paper-2: #e6eefa;
  --pv-public-card: #ffffff;
  --pv-public-ink: #0f1b33;
  --pv-public-ink-soft: #4b5b7a;
  --pv-public-line: #d6e0f0;
  --pv-public-primary: #2563eb;
  --pv-public-primary-hover: #1d4ed8;
  --pv-public-primary-active: #1e40af;
  --pv-public-on-primary: #ffffff;
  --pv-public-accent: #60a5fa;
  --pv-public-sun: #ffc94d;
  --pv-public-teal: #0d9488;
  --pv-public-violet: #7c3aed;
  --pv-public-primary-soft: #dce8fe;
  --pv-public-accent-soft: #e3efff;
  --pv-public-teal-soft: #d4f1ec;
  --pv-public-violet-soft: #ece5fd;
  --pv-public-feature-bg: #0f1b33;
  --pv-public-feature-ink: #f3f7fd;
  --pv-public-feature-soft: #a9b8d4;
  --pv-public-glow-1: #93c5fd;
  --pv-public-glow-2: #c4b5fd;
  --pv-public-grain: .06;
  --pv-public-glow: .6;
  --pv-public-shadow: 0 30px 60px -24px rgba(20, 50, 120, .28), 0 10px 24px -12px rgba(20, 50, 120, .16);
  --pv-public-shadow-soft: 0 14px 30px -18px rgba(20, 50, 120, .32);
}

/* Dark: OS preference, unless the user forced light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-proven-theme="light"]) {
    --pv-bg: #1b1d21;
    --pv-surface: #232629;
    --pv-surface-2: #2a2d31;
    --pv-surface-3: #32363b;
    --pv-border: #3a3e44;
    --pv-border-strong: #4b5058;
    --pv-text: #e7e9ec;
    --pv-text-muted: #a8aeb7;
    --pv-text-faint: #929aa4;
    --pv-accent: #4d86f7;
    --pv-accent-hover: #6b9bfa;
    --pv-accent-active: #8ab0fb;
    --pv-accent-soft: #23304a;
    --pv-accent-soft-2: #2c3d5f;
    --pv-focus-ring: 0 0 0 3px rgba(77, 134, 247, .35);
    --pv-danger: #f97066;
    --pv-danger-soft: #3a2220;
    --pv-warn: #fdb022;
    --pv-warn-soft: #3a2e17;
    --pv-ok: #47cd89;
    --pv-ok-soft: #1c3328;
    --pv-violet: #a78bfa;
    --pv-violet-soft: #2b2540;
    --pv-teal: #2dc3b3;
    --pv-teal-soft: #163330;
    --pv-amber: #f5a524;
    --pv-amber-soft: #3a2e17;
    --pv-rose: #fb7185;
    --pv-rose-soft: #3b2128;
    --pv-chart-grid: #32363b;
    --pv-nav-bg: #1f2225;
    --pv-nav-glow: #222b3b;
    --pv-logo-plate: #eef0f3;
    --pv-canvas: #3d4147;
    --pv-page-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .45);
    --pv-shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
    --pv-shadow-2: 0 1px 3px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3);
    --pv-shadow-pop: 0 12px 32px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35);
    color-scheme: dark;
    --pv-public-paper: #0b1220;
    --pv-public-paper-2: #111b30;
    --pv-public-card: #15213a;
    --pv-public-ink: #e8effc;
    --pv-public-ink-soft: #a1b2d0;
    --pv-public-line: #23324f;
    --pv-public-primary: #60a5fa;
    --pv-public-primary-hover: #7db7fb;
    --pv-public-primary-active: #9cc8fc;
    --pv-public-on-primary: #0b1220;
    --pv-public-accent: #38bdf8;
    --pv-public-sun: #fcd34d;
    --pv-public-teal: #2dd4bf;
    --pv-public-violet: #a78bfa;
    --pv-public-primary-soft: #172b50;
    --pv-public-accent-soft: #13263f;
    --pv-public-teal-soft: #0f2b2b;
    --pv-public-violet-soft: #211b40;
    --pv-public-feature-bg: #e8effc;
    --pv-public-feature-ink: #0f1b33;
    --pv-public-feature-soft: #4b5b7a;
    --pv-public-glow-1: #1d4ed8;
    --pv-public-glow-2: #5b21b6;
    --pv-public-grain: .09;
    --pv-public-glow: .4;
    --pv-public-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7), 0 10px 24px -12px rgba(0, 0, 0, .5);
    --pv-public-shadow-soft: 0 14px 30px -18px rgba(0, 0, 0, .7);
  }
}

/* Dark: forced by the user. Same values as above (kept in sync by scripts/check-tokens.mjs). */
:root[data-proven-theme="dark"] {
  --pv-bg: #1b1d21;
  --pv-surface: #232629;
  --pv-surface-2: #2a2d31;
  --pv-surface-3: #32363b;
  --pv-border: #3a3e44;
  --pv-border-strong: #4b5058;
  --pv-text: #e7e9ec;
  --pv-text-muted: #a8aeb7;
  --pv-text-faint: #929aa4;
  --pv-accent: #4d86f7;
  --pv-accent-hover: #6b9bfa;
  --pv-accent-active: #8ab0fb;
  --pv-accent-soft: #23304a;
  --pv-accent-soft-2: #2c3d5f;
  --pv-focus-ring: 0 0 0 3px rgba(77, 134, 247, .35);
  --pv-danger: #f97066;
  --pv-danger-soft: #3a2220;
  --pv-warn: #fdb022;
  --pv-warn-soft: #3a2e17;
  --pv-ok: #47cd89;
  --pv-ok-soft: #1c3328;
  --pv-violet: #a78bfa;
  --pv-violet-soft: #2b2540;
  --pv-teal: #2dc3b3;
  --pv-teal-soft: #163330;
  --pv-amber: #f5a524;
  --pv-amber-soft: #3a2e17;
  --pv-rose: #fb7185;
  --pv-rose-soft: #3b2128;
  --pv-chart-grid: #32363b;
  --pv-nav-bg: #1f2225;
  --pv-nav-glow: #222b3b;
  --pv-logo-plate: #eef0f3;
  --pv-canvas: #3d4147;
  --pv-page-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .45);
  --pv-shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
  --pv-shadow-2: 0 1px 3px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3);
  --pv-shadow-pop: 0 12px 32px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35);
  color-scheme: dark;
  --pv-public-paper: #0b1220;
  --pv-public-paper-2: #111b30;
  --pv-public-card: #15213a;
  --pv-public-ink: #e8effc;
  --pv-public-ink-soft: #a1b2d0;
  --pv-public-line: #23324f;
  --pv-public-primary: #60a5fa;
  --pv-public-primary-hover: #7db7fb;
  --pv-public-primary-active: #9cc8fc;
  --pv-public-on-primary: #0b1220;
  --pv-public-accent: #38bdf8;
  --pv-public-sun: #fcd34d;
  --pv-public-teal: #2dd4bf;
  --pv-public-violet: #a78bfa;
  --pv-public-primary-soft: #172b50;
  --pv-public-accent-soft: #13263f;
  --pv-public-teal-soft: #0f2b2b;
  --pv-public-violet-soft: #211b40;
  --pv-public-feature-bg: #e8effc;
  --pv-public-feature-ink: #0f1b33;
  --pv-public-feature-soft: #4b5b7a;
  --pv-public-glow-1: #1d4ed8;
  --pv-public-glow-2: #5b21b6;
  --pv-public-grain: .09;
  --pv-public-glow: .4;
  --pv-public-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7), 0 10px 24px -12px rgba(0, 0, 0, .5);
  --pv-public-shadow-soft: 0 14px 30px -18px rgba(0, 0, 0, .7);
}

/* Tenant branding (Phase 2+): the tenant portal and verification pages set
   --pv-brand-accent on <html>; components that should carry the tenant's colour
   use var(--pv-brand-accent, var(--pv-accent)). */

@media (prefers-reduced-motion: reduce) {
  :root {
    --pv-dur-fast: 0ms;
    --pv-dur: 0ms;
  }
}