/* P7CO Design System - tokens (single source; ADR-0009 section 10; docs/design/REFERENCE_CATALOGUE.md section 3).
   Identity from Dewi, admin patterns from NiceAdmin Pro 2, both translated here; the logo is the Founder's file.
   No page declares a colour, font, spacing, radius or shadow outside these tokens. */


@font-face { font-family: "Outfit"; font-weight: 100 900; font-display: swap; src: url("../fonts/outfit-variable-latin.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-tight-variable-latin.woff2") format("woff2"); }

:root {
  /* brand: petrol of the pack's symbol (#0f3247) and the P7CO petrol/lime pair */
  --p7co-brand: #16455f; --p7co-brand-700: #0f3247; --p7co-brand-900: #07202e; --p7co-brand-200: #c9d8e3; --p7co-brand-50: #eef3f7;
  --p7co-heading: #0f3247; --p7co-link: #16455f;   /* text roles of the brand tone: light in dark mode, where the petrol would vanish */
  --p7co-accent: #66ff4c; --p7co-accent-ink: #0b2a0a; --p7co-accent-soft: #e4ffdf;
  /* neutrals (Dewi: deep headings, soft text, #f1f4fa light background) */
  --p7co-ink: #1c2730; --p7co-ink-2: #4a5a66; --p7co-ink-3: #5c6a76; --p7co-line: #dbe3ec;
  --p7co-surface: #ffffff; --p7co-bg: #f1f4fa;
  /* semantic (AA on their soft backgrounds) */
  --p7co-ok: #136b36; --p7co-ok-soft: #e3f5ea; --p7co-warn: #8a4f00; --p7co-warn-soft: #fff1dd;
  --p7co-danger: #b71c1c; --p7co-danger-soft: #fde7e7; --p7co-info: var(--p7co-brand); --p7co-info-soft: var(--p7co-brand-50);
  /* typography (Founder, 2026-10-02): titles in Outfit, slightly condensed; interface in Inter Tight; both variable, self-hosted latin */
  --p7co-font-title: "Outfit", system-ui, sans-serif; --p7co-font-ui: "Inter Tight", system-ui, sans-serif;
  --p7co-title-condense: 1;   /* the small condensation of the titles (scaleX) */
  --p7co-fs-display: 3rem; --p7co-fs-h1: 1.75rem; --p7co-fs-h2: 1.25rem; --p7co-fs-h3: 1.0625rem;
  --p7co-fs-body: 1rem; --p7co-fs-small: .875rem; --p7co-fs-caption: .75rem; --p7co-fs-metric: 1.75rem;
  --p7co-lh-title: 1.2; --p7co-lh-body: 1.5;
  /* spacing (scale of 4; Dewi section rhythm) */
  --p7co-s1: 4px; --p7co-s2: 8px; --p7co-s3: 12px; --p7co-s4: 16px; --p7co-s5: 24px; --p7co-s6: 32px; --p7co-s7: 48px; --p7co-s8: 64px;
  --p7co-section: 48px; --p7co-gutter: var(--p7co-s4); --p7co-card-pad: 28px; --p7co-content-max: 1240px;
  /* radius (NiceAdmin: 0.25rem everywhere), elevation (Dewi diffuse card shadow; NiceAdmin tinted), motion, focus */
  /* P7CO override of NiceAdmin (Founder 2026-10-02): ONE card radius for every card, metric, panel, empty state and entry card; smaller for controls */
  --p7co-r-control: 8px; --p7co-r-card: 16px; --p7co-r-pill: 999px; --p7co-r-chip: 6px;
  --p7co-shadow-1: 0 0 30px rgba(22, 69, 95, .08);
  --p7co-shadow-2: 0 8px 24px rgba(22, 69, 95, .14);
  --p7co-shadow-cta: 0 10px 24px rgba(15, 50, 71, .28);
  /* entry canvas (NiceAdmin .fauth radial accent glow, main.css:3733-3741, translated to petrol + lime) and the Dewi dark hero (main.css:48-53, 913-957) */
  --p7co-entry-canvas: radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--p7co-brand) 12%, transparent) 0, transparent 38%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--p7co-accent) 16%, transparent) 0, transparent 34%);
  --p7co-entry-hero-bg: linear-gradient(160deg, var(--p7co-brand-700) 0%, var(--p7co-brand-900) 100%);
  --p7co-motion-fast: 150ms ease-out; --p7co-motion: 200ms ease-out;
  --p7co-focus: 0 0 0 2px var(--p7co-surface), 0 0 0 4px var(--p7co-brand);
  /* shell (NiceAdmin: header 64, sidebar 280) */
  --p7co-topbar-h: 64px; --p7co-sidebar-w: 280px; --p7co-row-h: 48px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --p7co-heading: #e6eef5; --p7co-link: #8cc4e8; --p7co-brand-900: #07202e;
  --p7co-ok: #7fdc9c; --p7co-warn: #f3bd6a; --p7co-danger: #ff9a9a; --p7co-warn-soft: #3a2a0a; --p7co-accent-soft: #163a16;   /* status inks that read on the dark softs (axe AA) */
  --p7co-ink: #eef3f7; --p7co-ink-2: #b7c6d1; --p7co-ink-3: #8aa0b0; --p7co-line: #24405a;
  --p7co-surface: #13283a; --p7co-bg: #0b1a24; --p7co-brand-50: #16304a; --p7co-brand-200: #2d5a7a;
  --p7co-ok-soft: #10331d; --p7co-warn-soft: #3a2a0a; --p7co-danger-soft: #3b1414; --p7co-info-soft: #16304a;
  --p7co-shadow-1: 0 0 30px rgba(0, 0, 0, .35); --p7co-shadow-2: 0 8px 24px rgba(0, 0, 0, .5);
  --p7co-focus: 0 0 0 2px var(--p7co-surface), 0 0 0 4px var(--p7co-accent);
  color-scheme: dark;
}

@media (min-width: 834px) { :root { --p7co-gutter: var(--p7co-s5); } }
@media (min-width: 1440px) { :root { --p7co-gutter: 30px; } }
@media (prefers-reduced-motion: reduce) { :root { --p7co-motion-fast: 0ms; --p7co-motion: 0ms; } }

/* Fluent UI v5 is functional infrastructure only: whatever it renders takes the P7CO tokens (declared on body so they
   win over the theme values its script sets inline on <html>). */
body {
  --colorBrandBackground: var(--p7co-brand); --colorBrandBackgroundHover: var(--p7co-brand-700); --colorBrandBackgroundPressed: var(--p7co-brand-700);
  --colorBrandBackgroundSelected: var(--p7co-brand-700); --colorBrandBackground2: var(--p7co-brand-50); --colorBrandStroke1: var(--p7co-brand);
  --colorBrandForeground1: var(--p7co-brand); --colorBrandForeground2: var(--p7co-brand-700); --colorBrandForegroundLink: var(--p7co-brand);
  --colorCompoundBrandBackground: var(--p7co-brand); --colorCompoundBrandStroke: var(--p7co-brand); --colorCompoundBrandForeground1: var(--p7co-brand);
  --colorNeutralForeground1: var(--p7co-ink); --colorNeutralForeground2: var(--p7co-ink-2); --colorNeutralForeground3: var(--p7co-ink-3);
  --colorNeutralForegroundOnBrand: #ffffff; --colorNeutralForegroundDisabled: var(--p7co-ink-3);
  --colorNeutralBackground1: var(--p7co-surface); --colorNeutralBackground2: var(--p7co-bg); --colorNeutralBackground3: var(--p7co-bg);
  --colorNeutralStroke1: var(--p7co-line); --colorNeutralStroke2: var(--p7co-line); --colorNeutralStrokeAccessible: var(--p7co-ink-3);
  --colorStrokeFocus2: var(--p7co-brand);
  --colorStatusDangerForeground1: var(--p7co-danger); --colorStatusSuccessForeground1: var(--p7co-ok); --colorStatusWarningForeground1: var(--p7co-warn);
  --borderRadiusMedium: var(--p7co-r-control); --borderRadiusLarge: var(--p7co-r-card); --borderRadiusXLarge: var(--p7co-r-card);
  --fontFamilyBase: var(--p7co-font-ui); --fontSizeBase300: var(--p7co-fs-body); --lineHeightBase300: 1.5rem;
  --shadow4: var(--p7co-shadow-1); --shadow8: var(--p7co-shadow-1); --shadow16: var(--p7co-shadow-2);
}