/* PlanCourt design tokens — the one place these values are defined.
 *
 * Marketing, sign-in, the workspace and the report reader each grew their own palette, and they did
 * not agree. "The accent" was #f05243 in the workspace and sign-in but #e34234 on the marketing site
 * and in the report; "success" was #55d69a in one place and #34d399 in another; warning was #efb366
 * against #f59e0b. The same object therefore changed colour as a reader moved through the product.
 * Three of the seven secondary-text values also failed WCAG AA on their own backgrounds:
 *
 *   workspace --muted-2 #626978 on #101016 ... 3.44:1  (needs 4.5:1)
 *   auth      --ink-3   #6f7685 on #0a0a0f ... 4.33:1
 *   report    --muted-2 #737b8b on #101218 ... 4.40:1
 *
 * This file is the single source for those values, and every surface sheet now aliases its own names
 * to them rather than restating hex. That keeps each sheet's existing selectors working — the
 * workspace still writes `var(--muted)` — while making one edit change the whole product.
 *
 * Naming: `--pc-*` is canonical and never used directly in a component. The alias blocks at the end
 * map the historical per-surface names onto it, so no sheet has to be rewritten to gain the system.
 *
 * Loaded before every other sheet on all four surfaces.
 */

:root {
  --pc-glass-surface: color-mix(in srgb, var(--pc-surface) 78%, transparent);
  --pc-glass-rim: color-mix(in srgb, var(--pc-ink) 18%, transparent);
  --pc-glass-blur: 16px;
  /* ---- surfaces: three levels, in reading order ---- */
  --pc-bg: #08090d;            /* the page behind everything */
  --pc-surface: #101218;       /* a panel sitting on the page */
  --pc-surface-2: #15181f;     /* a control or inset inside a panel */
  --pc-surface-3: #1b1f27;     /* hover, raised, or selected */
  --pc-well: #0d0e14;          /* an inset well inside a panel: an editor, a rail, a comparison pane */
  --pc-well-deep: #0b0c12;     /* the deepest inset, for a read-only document surface */
  --pc-bg-deep: #090a0f;       /* a page sitting behind a panel, e.g. the sign-in backdrop */
  --pc-on-brand: #081020;      /* text and icons placed on the brand colour */
  --pc-recess: #000;                     /* the counter-role to a lift: darkened, not lightened */
  --pc-shadow-rgb: 0, 0, 0;              /* channels for a shadow built with rgba() */
  --pc-overlay: rgba(0, 0, 0, .62);      /* the scrim behind a dialog or drawer */
  --pc-inset-shade: rgba(0, 0, 0, .22);  /* a recessed area inside a panel */

  /* ---- lines ---- */
  --pc-line: rgba(255, 255, 255, .10);
  --pc-line-soft: rgba(255, 255, 255, .06);
  --pc-line-strong: rgba(255, 255, 255, .22);

  /* ---- text ----
     Each value is checked at AA against every surface it can land on, not just the primary one.
     `--pc-ink-3` is the faintest text this product may use for anything a reader has to read: it is
     #848b9c, which clears 4.5:1 on all four dark surfaces (worst: the hover surface at 4.84:1). The
     value this role replaced, #626978, measured 3.44:1 on the panel and failed outright. */
  --pc-ink: #e9ecf3;           /* primary: headings, body, values */
  --pc-ink-2: #a2a8b6;         /* secondary: supporting text that must still be comfortable */
  --pc-ink-3: #848b9c;         /* tertiary: metadata, captions — the floor */

  /* ---- brand and status ----
     One accent, one green, one amber, one red, everywhere. Marketing values are the reference
     because that surface was the most carefully set; the others are brought to it. */
  --pc-brand: #e34234;
  --pc-brand-hover: #c9372a;
  --pc-brand-soft: rgba(227, 66, 52, .13);
  --pc-brand-tint: #e8a79e;      /* brand-coloured secondary text and hairlines */
  /* Brand-coloured *text* smaller than 18.66px bold needs 4.5:1 against its background. --pc-brand
     measures 4.31:1 on the marketing surface (#15181f), which Lighthouse fails; this variant measures
     5.77:1 there and 6.6:1 on the workspace surface. It is the same accent, one step lighter, used
     only where the accent carries words rather than fills something. */
  --pc-brand-text: #f4645a;
  --pc-ready: #34d399;
  --pc-warn: #f59e0b;
  --pc-warn-soft: rgba(245, 158, 11, .12);
  --pc-revise: #f87171;
  --pc-revise-soft: rgba(248, 113, 113, .12);
  --pc-add-bg: rgba(52, 211, 153, .12);
  --pc-del-bg: rgba(248, 113, 113, .12);

  /* ---- type ----
     The interface face for the interface: navigation, controls, prose, model names, headings.
     Monospace is for code, identifiers, hashes and numeric metadata — not for labels. */
  --pc-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pc-mono: "IBM Plex Mono", "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --pc-serif: "Fraunces", Georgia, "Times New Roman", serif;

  --pc-text-xs: 11.5px;        /* the floor for any text, metadata only */
  --pc-text-sm: 12.5px;        /* supporting text */
  --pc-text-base: 14px;        /* functional body */
  --pc-text-lg: 15px;          /* document body */
  --pc-text-xl: 18px;          /* section titles */
  --pc-text-2xl: 24px;         /* page titles */

  /* ---- space: one scale, so density is a decision rather than an accident ---- */
  --pc-space-1: 4px;
  --pc-space-2: 8px;
  --pc-space-3: 12px;
  --pc-space-4: 16px;
  --pc-space-5: 20px;
  --pc-space-6: 24px;
  --pc-space-8: 32px;

  /* ---- shape and motion ----
     Local feedback is quick enough to feel immediate; a panel transition is slower because more is
     moving. Nothing on a reading surface animates on its own. */
  --pc-radius-sm: 8px;
  --pc-radius: 12px;
  --pc-radius-lg: 16px;
  --pc-motion-fast: 140ms;
  --pc-motion-panel: 200ms;
  --pc-ease: cubic-bezier(.22, .61, .36, 1);

  --pc-shadow: 0 18px 44px rgba(0, 0, 0, .44);
}

/* ---- light theme ----
   `--pc-revise` is #b3261e for the same reason: #dc2626 measured 3.98:1 on the hover surface, and
   the danger colour is used for text (a "not applicable" count, a failing check), not only for
   borders. #b3261e holds 5.38:1 at worst.

   `--pc-ink-3` is #5b636f here, not the #6b7280 the palette first carried: #6b7280 measured 4.28:1 on
   a tinted panel and 3.98:1 on the hover surface, both below the 4.5:1 AA floor for small text, and
   Lighthouse failed it on the workspace. #5b636f holds at least 5.00:1 on every light surface it can
   land on (page, panel, hover, white).
   Every colour in every sheet is a role defined here, including the translucent layer, so the whole
   palette inverts by switching these values. */
:root[data-surface="app"][data-theme="light"],
:root[data-surface="public"][data-theme="light"],
:root[data-surface="site"][data-theme="light"] {
  color-scheme: light;

  --pc-bg: #f6f6f8;
  --pc-surface: #ffffff;
  --pc-surface-2: #f1f2f5;
  --pc-surface-3: #e7e9ee;
  --pc-well: #f4f5f8;
  --pc-well-deep: #fafbfc;
  --pc-bg-deep: #eef0f4;

  --pc-line: rgba(16, 18, 24, .14);
  --pc-line-soft: rgba(16, 18, 24, .08);
  --pc-line-strong: rgba(16, 18, 24, .30);

  --pc-ink: #16181f;
  --pc-ink-2: #4a515f;
  --pc-ink-3: #5b636f;
  --pc-on-brand: #ffffff;

  --pc-brand: #c9372a;
  --pc-brand-hover: #a82c20;
  --pc-brand-soft: rgba(201, 55, 42, .10);
  --pc-brand-tint: #a83b2e;
  --pc-brand-text: #b32d20;   /* worst 5.22:1 across the light surfaces */
  --pc-ready: #15803d;
  --pc-warn: #b45309;
  --pc-warn-soft: rgba(180, 83, 9, .10);
  --pc-revise: #b3261e;
  --pc-revise-soft: rgba(220, 38, 38, .09);
  --pc-add-bg: rgba(21, 128, 61, .10);
  --pc-del-bg: rgba(220, 38, 38, .09);

  --pc-overlay: rgba(16, 18, 24, .40);
  --pc-inset-shade: rgba(16, 18, 24, .05);
  --pc-shadow: 0 14px 34px rgba(16, 18, 24, .12);
  --pc-shadow-rgb: 16, 18, 24;
}

/* The same palette for readers following the operating system. The declarations are identical to the
   block above by test, so the two cannot drift: `data-theme="system"` is a state the selector list
   cannot express, but the values must not be written twice by hand. */
@media (prefers-color-scheme: light) {
  :root[data-surface][data-theme="system"] {
  color-scheme: light;

  --pc-bg: #f6f6f8;
  --pc-surface: #ffffff;
  --pc-surface-2: #f1f2f5;
  --pc-surface-3: #e7e9ee;
  --pc-well: #f4f5f8;
  --pc-well-deep: #fafbfc;
  --pc-bg-deep: #eef0f4;

  --pc-line: rgba(16, 18, 24, .14);
  --pc-line-soft: rgba(16, 18, 24, .08);
  --pc-line-strong: rgba(16, 18, 24, .30);

  --pc-ink: #16181f;
  --pc-ink-2: #4a515f;
  --pc-ink-3: #5b636f;
  --pc-on-brand: #ffffff;

  --pc-brand: #c9372a;
  --pc-brand-hover: #a82c20;
  --pc-brand-soft: rgba(201, 55, 42, .10);
  --pc-brand-tint: #a83b2e;
  --pc-brand-text: #b32d20;   /* worst 5.22:1 across the light surfaces */
  --pc-ready: #15803d;
  --pc-warn: #b45309;
  --pc-warn-soft: rgba(180, 83, 9, .10);
  --pc-revise: #b3261e;
  --pc-revise-soft: rgba(220, 38, 38, .09);
  --pc-add-bg: rgba(21, 128, 61, .10);
  --pc-del-bg: rgba(220, 38, 38, .09);

  --pc-overlay: rgba(16, 18, 24, .40);
  --pc-inset-shade: rgba(16, 18, 24, .05);
  --pc-shadow: 0 14px 34px rgba(16, 18, 24, .12);
  --pc-shadow-rgb: 16, 18, 24;
  }
}

/* ================= historical aliases =================
   Each surface sheet keeps the variable names it already uses, so no component rule has to change.
   These blocks are the seam between the old palettes and the one system, and they are why the four
   surfaces now agree without a rewrite. */

/* the workspace (web/style.css) */
:root {
  --bg: var(--pc-bg);
  --panel: var(--pc-surface);
  --panel2: var(--pc-surface-2);
  --border: var(--pc-line);
  --border-soft: var(--pc-line-soft);
  --text: var(--pc-ink);
  --muted: var(--pc-ink-2);
  --muted-2: var(--pc-ink-3);
  --accent: var(--pc-brand);
  --accent-soft: var(--pc-brand-soft);
  --green: var(--pc-ready);
  --amber: var(--pc-warn);
  --red: var(--pc-revise);
  --radius: var(--pc-radius-lg);
  --sans: var(--pc-sans);
  --mono: var(--pc-mono);
  --well: var(--pc-well);
  --well-deep: var(--pc-well-deep);
  --bg-deep: var(--pc-bg-deep);
  --on-brand: var(--pc-on-brand);
}

/* the public/auth pages (web/public.css) */
:root {
  --paper: var(--pc-bg);
  --paper-2: var(--pc-surface);
  --card: var(--pc-surface-2);
  --ink: var(--pc-ink);
  --ink-2: var(--pc-ink-2);
  --ink-3: var(--pc-ink-3);
  --line: var(--pc-line);
  --line-soft: var(--pc-line-soft);
  --brass: var(--pc-brand);
  --pass: var(--pc-ready);
  --fail: var(--pc-revise);
}

/* the marketing site (site/landing.css) and the report reader (site/report.css) */
:root {
  --surface: var(--pc-surface);
  --surface-2: var(--pc-surface-2);
  --surface-3: var(--pc-surface-3);
  --card-solid: var(--pc-surface-2);
  --faint: var(--pc-ink-3);
  --hair: var(--pc-line);
  --hair-soft: var(--pc-line-soft);
  --line-strong: var(--pc-line-strong);
  --brand: var(--pc-brand);
  --brand-hover: var(--pc-brand-hover);
  --brand-soft: var(--pc-brand-soft);
  --brass-2: var(--pc-brand-hover);
  --ready-ink: var(--pc-ready);
  --warn: var(--pc-warn);
  --revise: var(--pc-revise);
  --add-bg: var(--pc-add-bg);
  --del-bg: var(--pc-del-bg);
  --shadow: var(--pc-shadow);
  --serif: var(--pc-serif);
  --ease: var(--pc-ease);
}