/**
 * PPP Design System v1 — shared tokens (charcoal / gold / warm stone / Source Sans 3).
 * Load order: ppp_fonts.css → this file → ppp_components.css → surface CSS.
 */
:root {
  /* ----- Typography ----- */
  --ppp-font-sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ppp-font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;

  --ppp-font-size-xs: 0.75rem;
  --ppp-font-size-sm: 0.8125rem;
  --ppp-font-size-base: 1rem;
  --ppp-font-size-md: 1.0625rem;
  --ppp-font-size-lg: 1.25rem;

  --ppp-line-height-tight: 1.25;
  --ppp-line-height-base: 1.5;
  --ppp-line-height-relaxed: 1.65;

  /* ----- Brand palette ----- */
  --ppp-charcoal-950: #111113;
  --ppp-charcoal-900: #1b1b1d;
  --ppp-charcoal-800: #262629;
  --ppp-gold-500: #d6af5c;
  --ppp-gold-600: #b88a35;
  /* Muted control gold — lower saturation than brand gold (checkbox/radio only) */
  --ppp-control-gold: #8a7350;
  --ppp-control-gold-hover: #736144;
  --ppp-control-gold-ring: rgba(115, 97, 68, 0.36);
  --ppp-stone-50: var(--bg-surface-subtle);
  --ppp-stone-100: var(--bg-surface-muted);
  /* Standard PPP near-white page canvas (ops UI, workspaces, client surfaces) */
  --ppp-stone-canvas: #eae4d9;

  /* ----- Canonical surface hierarchy (platform UI) ----- */
  --bg-page: #fefefe;
  --bg-surface: #ffffff;
  --bg-surface-subtle: #f7f6f2;
  --bg-surface-muted: #eceae5;
  --bg-sidebar: #17191d;
  --bg-info: #eef3f6;
  --bg-success: #edf4f0;
  --bg-warning: #f8f2e5;
  --bg-danger: #f7ece9;

  --ppp-workspace-canvas: var(--bg-page);

  --ppp-accent-gold: var(--ppp-gold-500);
  --ppp-accent-green: #5a7563;
  --ppp-accent-indigo: #4f5768;
  --ppp-accent-clay: #9a6b5c;

  --ppp-text: #18181a;
  --ppp-text-muted: #5f605d;
  --ppp-text-soft: #747572;
  --ppp-heading: var(--ppp-charcoal-900);

  --ppp-charcoal-rgb: 27, 27, 29;
  --ppp-gold-rgb: 214, 175, 92;

  /* ----- Surfaces ----- */
  --ppp-surface-page: var(--bg-page);
  --ppp-surface-paper: var(--bg-surface);
  --ppp-surface-card: var(--bg-surface);
  --ppp-surface-card-soft: var(--bg-surface-muted);
  --ppp-surface-muted: var(--bg-surface-muted);

  --ppp-surface: var(--bg-surface);
  --ppp-border: #ece8e2;
  --ppp-border-strong: #e0dbd4;
  --ppp-border-soft: rgba(136, 127, 114, 0.2);
  --ppp-divider: rgba(136, 127, 114, 0.14);
  --ppp-divider-strong: rgba(136, 127, 114, 0.30);

  /* ----- Spacing ----- */
  --ppp-space-1: 0.25rem;
  --ppp-space-2: 0.5rem;
  --ppp-space-3: 0.75rem;
  --ppp-space-4: 1rem;
  --ppp-space-5: 1.25rem;
  --ppp-space-6: 1.5rem;
  --ppp-space-8: 2rem;

  /* ----- Radius ----- */
  --ppp-radius-sm: 4px;
  --ppp-radius-md: 8px;
  --ppp-radius-lg: 10px;
  --ppp-radius-xl: 12px;

  /* ----- Shadows ----- */
  --ppp-shadow-xs: 0 1px 2px rgba(17, 17, 19, 0.04);
  --ppp-shadow-sm: 0 1px 2px rgba(17, 17, 19, 0.06);
  --ppp-shadow-md: 0 1px 2px rgba(17, 17, 19, 0.05), 0 6px 18px rgba(17, 17, 19, 0.06);

  /* ----- Controls ----- */
  --ppp-control-border: var(--ppp-border);
  --ppp-control-bg: var(--bg-surface);
  --ppp-control-focus-ring: rgba(var(--ppp-gold-rgb), 0.42);
  --ppp-control-radius: var(--ppp-radius-md);
  --ppp-control-accent: var(--ppp-control-gold);
  --ppp-control-accent-hover: var(--ppp-control-gold-hover);
  --ppp-control-accent-ring: var(--ppp-control-gold-ring);

  /* ----- Buttons ----- */
  --ppp-btn-primary-bg: var(--ppp-charcoal-900);
  --ppp-btn-primary-text: #ffffff;
  --ppp-btn-primary-border: var(--ppp-charcoal-900);
  --ppp-btn-primary-hover-bg: var(--ppp-charcoal-950);

  --ppp-btn-secondary-bg: var(--bg-surface-muted);
  --ppp-btn-secondary-text: var(--ppp-text);
  --ppp-btn-secondary-border: var(--ppp-border);

  --ppp-btn-warning-bg: #c39a4a;
  --ppp-btn-warning-text: #ffffff;
  --ppp-btn-warning-border: #b88a35;

  --ppp-btn-success-bg: var(--ppp-accent-green);
  --ppp-btn-success-text: #ffffff;
  --ppp-btn-success-border: #4d6556;

  --ppp-btn-danger-bg: var(--ppp-accent-clay);
  --ppp-btn-danger-text: #ffffff;
  --ppp-btn-danger-border: #8a5e50;

  --ppp-btn-accent-bg: var(--ppp-gold-500);
  --ppp-btn-accent-border: var(--ppp-gold-600);
  --ppp-btn-accent-text: #161616;
  --ppp-btn-accent-hover-bg: var(--ppp-gold-600);
  --ppp-btn-neutral-bg: var(--bg-surface-muted);
  --ppp-btn-neutral-border: var(--ppp-border);
  --ppp-btn-neutral-text: var(--ppp-text);

  /* ----- Callouts ----- */
  --ppp-callout-info-bg: var(--bg-info);
  --ppp-callout-info-border: #dedbd4;
  --ppp-callout-warning-bg: var(--bg-warning);
  --ppp-callout-warning-border: #e8dfd0;
  --ppp-callout-danger-bg: var(--bg-danger);
  --ppp-callout-danger-border: #e4d4cf;
  --ppp-callout-safety-bg: var(--bg-success);
  --ppp-callout-safety-border: #c8d8cc;

  /* Legacy app.css bridges */
  --bg: var(--bg-page);
  --surface: var(--bg-surface);
  --text: var(--ppp-text);
  --muted: var(--ppp-text-muted);
  --border: var(--ppp-border);
  --accent: var(--ppp-charcoal-900);
  --accent-hover: var(--ppp-charcoal-950);
  --shadow: var(--ppp-shadow-sm);
  --ppp-focus-ring: var(--ppp-control-focus-ring);
  --ppp-range-accent: #b88a35;

  /* Project workflow status — distinct muted palette for at-a-glance scanning */
  --ppp-status-new-bg: #E8F1FD;
  --ppp-status-new-text: #245A9B;
  --ppp-status-dispatched-bg: #EFE8FB;
  --ppp-status-dispatched-text: #6443A8;
  --ppp-status-scheduled-bg: #DFF4F1;
  --ppp-status-scheduled-text: #0F6A5F;
  --ppp-status-submitted-bg: #FCE9D8;
  --ppp-status-submitted-text: #A35A00;
  --ppp-status-under-review-bg: #F4E7C8;
  --ppp-status-under-review-text: #8A5A00;
  --ppp-status-completed-bg: #DDF3E3;
  --ppp-status-completed-text: #2E6E3E;
  --ppp-status-cancelled-bg: #E5E7EB;
  --ppp-status-cancelled-text: #4B5563;
  --ppp-status-on-hold-bg: #FCE2E2;
  --ppp-status-on-hold-text: #A33A3A;
  --ppp-status-default-bg: #E5E7EB;
  --ppp-status-default-text: #4B5563;

  /* Map markers */
  --ppp-marker-new: #a8a29c;
  --ppp-marker-dispatched: #b89455;
  --ppp-marker-scheduled: #6a9a94;
  --ppp-marker-submitted: #7a8fa3;
  --ppp-marker-under-review: #b8925a;
  --ppp-marker-completed: #6b6b70;
  --ppp-marker-on-hold: #a89890;
  --ppp-marker-cancelled: #c48484;
  --ppp-marker-unknown: #9a9590;

  /* Ops shell aliases */
  --ppp-ops-rail-top: #141619;
  --ppp-ops-rail-mid: var(--bg-sidebar);
  --ppp-ops-rail-deep: #1e2126;
  --ppp-ops-rail-fog: rgba(255, 255, 255, 0.92);
  --ppp-ops-rail-fog-muted: rgba(214, 175, 92, 0.88);
  --ppp-ops-rail-edge: rgba(255, 255, 255, 0.08);
  --ppp-ops-rail-inset: rgba(255, 255, 255, 0.04);
  --ppp-ops-canvas-floor: var(--bg-page);
  --ppp-ops-canvas-mineral-a: var(--bg-page);
  --ppp-ops-canvas-mineral-b: var(--bg-page);
  --ppp-ops-surface: var(--bg-surface);
  --ppp-ops-surface-raised: var(--bg-surface);
  --ppp-ops-surface-inset: transparent;
  --ppp-ops-surface-2: var(--bg-surface-muted);
  --ppp-ops-feature-surface: var(--rpt-highlight, #faf8f5);
  --ppp-ops-border: rgba(24, 24, 26, 0.08);
  --ppp-ops-border-strong: rgba(24, 24, 26, 0.12);
  --ppp-ops-text: var(--ppp-text);
  --ppp-ops-muted: var(--ppp-text-muted);
  --ppp-ops-accent: var(--ppp-gold-500);
  --ppp-ops-accent-rgb: var(--ppp-gold-rgb);
  --ppp-ops-focus: var(--ppp-focus-ring);
  --ppp-ops-shadow-rest: var(--shadow);
  --ppp-ops-shadow-elev: 0 8px 24px rgba(17, 17, 19, 0.08);
  --ppp-ops-radius-lg: var(--ppp-radius-lg);
  --ppp-ops-radius-md: var(--ppp-radius-md);

  /* Report / deliverable aliases (report_ppp.css) — decoupled from platform UI canvas */
  --rpt-canvas: var(--ppp-stone-canvas);
  --rpt-surface: var(--rpt-paper);
  --rpt-stone-50: var(--ppp-stone-canvas);
  --rpt-gold-500: var(--ppp-gold-500);
  --rpt-gold-accent: rgba(196, 153, 82, 0.42);
  --rpt-shadow: 0 1px 2px rgba(24, 24, 26, 0.04), 0 8px 20px rgba(24, 24, 26, 0.06);
  --rpt-surface-paper: #fdfdfc;
  --rpt-paper: #fdfdfc;
  --rpt-border: #eeeae3;
  --rpt-border-strong: #e5e0d8;
  --rpt-border-table: #f0ece6;
  --rpt-highlight-border: rgba(136, 127, 114, 0.12);
  --rpt-footer-bg: var(--rpt-paper);
  --rpt-footer-divider: rgba(136, 127, 114, 0.1);
  --rpt-footer-text: var(--ppp-text-muted);
  --rpt-highlight: #faf8f5;
  --rpt-highlight-soft: #f5f2ec;
  --rpt-label-on-highlight: #575653;
  --rpt-section-gap: 12.5pt;
  --rpt-block-gap: 6pt;
  --rpt-major-margin-top: 16px;
  --rpt-major-after-bar: 11px;
  --rpt-pad-block-start: 0.26in;
  --rpt-pad-block-end: 0.2in;
  --rpt-pad-inline: 0.34in;
  --rpt-wrap-pad-bottom: 0.38in;
  --rpt-page-gap: 0.25in;
  --soft: var(--rpt-highlight);
  --soft-2: var(--rpt-highlight-soft);
  --eso-divider-cat-w: 1px;
  --eso-divider-major-w: 1px;
  --eso-divider-cat: rgba(136, 127, 114, 0.11);
  --eso-divider-obs: rgba(136, 127, 114, 0.06);
  --eso-divider-major: rgba(136, 127, 114, 0.22);

  /* Client intake bridge */
  --ci-font: var(--ppp-font-sans);

  accent-color: var(--ppp-control-accent);
}

body.ppp-ops-shell input[type="range"],
body.auth-page input[type="range"] {
  accent-color: var(--ppp-range-accent);
}