/* =========================================================================
   GUVNOR DS v4 — FOUNDATIONS (verbatim from the design-system package
   guvnor-design-system-0aed0f16, colors_and_type.css + type.css).
   Loads AFTER the Vite bundle and BEFORE the other ds4/ files, so:
   · these tokens/base styles override Tailwind preflight + main.css defaults
   · the v4.1 harmony layer in ds4/core.css (cream #f4f1e8, olive fills,
     dark olive ramp) overrides the light values here, per AMENDMENTS.md
   Font @imports removed — base.html loads Bricolage/Inter/Noto Sans.
   ========================================================================= */

/* =========================================================================
   Guvnor Design System — Foundations (v4 "Two Voices")
   -------------------------------------------------------------------------
   ONE warm Guvnor identity — cream paper, teal accent, Bricolage Grotesque
   + Inter — with the GOV.UK-derived palette QUARANTINED into an "official
   artefact" layer (official.css). Guvnor never wears government livery;
   official sources never wear Guvnor's.

   Voice rules (the governance contract):
   • Guvnor voice   → cream/white surfaces, teal accent, Bricolage headings,
                      Inter body, generous radii. TEAL links stay on Guvnor.
   • Official layer → quarantined tokens below (--official-*, --auth-*),
                      Noto Sans interiors, square corners, authority bands.
                      BLUE links leave Guvnor for an official source.
   ========================================================================= */


:root {
    /* ---- Surfaces — 4-step warm elevation (from the live product app) ---- */
    --color-bg-page: #faf6f1;         /* cream paper */
    --color-bg-light: #faf6f1;
    --color-bg-white: #ffffff;        /* cards, panels */
    --color-bg-alt: #f5f0e8;          /* quiet wells */
    --color-bg-hover: #f1ece4;        /* inputs, hover wells */
    --color-bg-inset: #e7e0d5;        /* pressed / deeper hover */

    /* ---- Hairlines ---- */
    --color-border: #d8cdba;          /* strong warm hairline */
    --color-border-light: #e6ddcf;    /* default warm hairline */

    /* ---- Text (near-black, faintly warm) ---- */
    --color-text-primary: #1c2430;
    --color-text-secondary: #5b6470;
    --color-text-muted: #8b8f98;
    --color-text-tertiary: #8b8f98;

    /* ---- Accent — teal, the logo tick. The ONE Guvnor brand colour. ---- */
    --color-accent: #10b981;
    --color-accent-text: #0f766e;      /* legible teal for text/labels */
    --color-accent-fill: #0f766e;      /* solid buttons — white 5.3:1 */
    --color-accent-fill-hover: #115e59;
    --color-accent-subtle: #e7f8f0;    /* tinted wash — pills, nudges */
    --color-teal: #10b981;             /* legacy name */
    --color-teal-light: #d1fae5;

    /* ---- Links — TEAL = stays within Guvnor ---- */
    --color-link: #0f766e;
    --color-link-hover: #115e59;
    --color-link-visited: #486860;

    /* ---- Focus — emerald ring (the yellow block belongs to GOV.UK) ---- */
    --color-focus: #10b981;
    --color-focus-text: #1c2430;
    --focus-width: 3px;
    --focus-offset: 2px;
    --focus-outline: 3px solid var(--color-focus);

    /* ---- Semantic ---- */
    --color-info: #2563eb;
    --color-info-bg: #eff6ff;
    --color-info-border: #2563eb;
    --color-success: #047857;
    --color-success-dark: #064e3b;
    --color-success-bg: #d1fae5;
    --color-success-light: #ecfdf5;
    --color-error: #d4351c;
    --color-error-dark: #942514;
    --color-error-bg: #fce4e4;
    --color-error-light: #fef2f2;
    --color-warning: #f59e0b;
    --color-warning-dark: #a8620a;
    --color-warning-bg: #fff7e8;

    /* ---- UK Nations (geographic callouts — mode-independent) ---- */
    --color-scotland: #0065bd;
    --color-wales: #d4351c;
    --color-northern-ireland: #912b88;
    --color-england: #00703c;

    /* ---- Extended ---- */
    --color-purple: #8b5cf6;
    --color-purple-dark: #6d2066;
    --color-gray-medium: #6b7280;
    --color-amber: #f59e0b;
    --color-deep-blue: #1e40af;

    /* ---- Action colours (from the product's main.css @theme layer) ----
       Solid fills that carry WHITE text. Use these, not the pastel
       --color-purple / --color-teal, whenever a chip or bar is filled. */
    --color-action-blue: #2563eb;
    --color-action-green: #16a34a;
    --color-action-red: #dc2626;
    --color-action-yellow: #eab308;    /* pairs with dark text only */
    --color-action-purple: #7c3aed;    /* white 5.4:1 — business-structure facet */
    --color-action-pink: #db2777;
    --color-action-teal: #0891b2;      /* white 4.6:1 — international facet */

    /* ---- Sector palette (18 sectors) ----
       Light-mode citrus pastels: they sit on cream and ALWAYS carry dark
       text (--color-text-on-sector), never white. Each has a paler tint
       for wash backgrounds. Dark mode swaps to saturated jewel tones. */
    --color-text-on-sector: #0f172a;
    --color-sector-construction: #fdba74;
    --color-sector-retail: #93c5fd;
    --color-sector-hospitality: #fca5a5;
    --color-sector-tech: #c4b5fd;
    --color-sector-finance: #6ee7b7;
    --color-sector-manufacturing: #fcd34d;
    --color-sector-health: #f9a8d4;
    --color-sector-lifesciences: #67e8f9;
    --color-sector-creative: #f0abfc;
    --color-sector-agriculture: #bef264;
    --color-sector-energy: #fde68a;
    --color-sector-transport: #5eead4;
    --color-sector-education: #a5b4fc;
    --color-sector-sports: #86efac;
    --color-sector-environment: #34d399;
    --color-sector-defence: #94a3b8;
    --color-sector-mining: #fb923c;
    --color-sector-charities: #f472b6;
    --color-tint-construction: #fff7ed;
    --color-tint-retail: #eff6ff;
    --color-tint-hospitality: #fef2f2;
    --color-tint-tech: #f5f3ff;
    --color-tint-finance: #ecfdf5;
    --color-tint-manufacturing: #f0f9ff;
    --color-tint-health: #fdf2f8;
    --color-tint-lifesciences: #ecfeff;
    --color-tint-creative: #fffbeb;
    --color-tint-agriculture: #f7fee7;
    --color-tint-energy: #fefce8;
    --color-tint-transport: #ecfeff;
    --color-tint-education: #eef2ff;
    --color-tint-sports: #f0fdf4;
    --color-tint-environment: #f0fdfa;
    --color-tint-defence: #f8fafc;
    --color-tint-mining: #fffbeb;
    --color-tint-charities: #fdf2f8;

    /* =====================================================================
       OFFICIAL ARTEFACT LAYER — quarantined GOV.UK heritage
       Used ONLY by official.css (embedded source snippets, provision quotes,
       CTAs to official services). Never on Guvnor-voice surfaces.
       ===================================================================== */
    --official-ink: #0b0c0c;           /* GOV.UK black — artefact text */
    --official-paper: #f8f6f2;         /* artefact body tint base */
    --official-blue: #1d70b8;          /* BLUE link = leaves for a source */
    --official-blue-dark: #003078;
    --official-border: #b1b4b6;
    --official-font: "Noto Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Issuing-authority bands (tax-disc logic: colour names WHO says it).
       Deep enough for white reverse type. */
    --auth-hmrc: #1f6b4a;              /* green  — HM Revenue & Customs   */
    --auth-companies-house: #1f4e79;   /* royal  — Companies House        */
    --auth-legislation: #8b2f3c;       /* claret — legislation.gov.uk     */
    --auth-govuk: #1d70b8;             /* blue   — GOV.UK guidance        */
    --auth-ico: #3b3a75;               /* indigo — Information Commissioner */
    --auth-fallback: #44546a;          /* slate  — unrecognised authority */

    /* Legacy aliases (old demos; now read as "official" hues) */
    --color-navy: #0b1f35;
    --color-navy-dark: #081729;
    --color-great-blue: #1e1348;
    --color-gov-blue: var(--official-blue);
    --color-gov-blue-dark: var(--official-blue-dark);
    --color-gov-blue-active: #006ccc;
    --color-turquoise: #28a197;
    --color-turquoise-dark: #10403d;
    --color-light-blue: #5694ca;
    --color-light-blue-dark: #2e75b6;

    /* ---- Typography — families set in type.css ---- */
    --font-stack: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-heading: "Bricolage Grotesque", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --font-size-base: 17px;           /* primary reading size */
    --font-size-sm: 15px;
    --font-size-xs: 13px;
    --font-size-lg: 24px;             /* heading m */
    --font-size-xl: 32px;             /* heading l */
    --font-size-xxl: 44px;            /* heading xl */

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

    --line-height-base: 1.6471;       /* 28px at 17px — on the 4px baseline */
    --line-height-tight: 1.1;
    --line-height-loose: 1.625;

    /* ---- Spacing — 4px baseline grid (was 5px; Swiss rhythm) ---- */
    --baseline: 4px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 40px;
    --space-8: 48px;
    --space-9: 64px;

    /* ---- Layout — column grid + gutters ---- */
    --max-width: 1120px;
    --gutter: 32px;                   /* standard gutter */
    --gutter-lg: 64px;                /* column ↔ rail */
    --measure: 34em;                  /* ~66ch at 17px Inter */

    /* ---- Radii — generous, the warm identity ---- */
    --border-radius: 12px;
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --border-radius-xl: 20px;
    --border-radius-pill: 100px;

    /* ---- Transitions ---- */
    --transition-fast: 0.1s ease;   /* @kind other */
    --transition-base: 0.15s ease;  /* @kind other */
    --transition-slow: 0.2s ease;   /* @kind other */

    /* ---- Shadows — warm-tinted, subtle ---- */
    --shadow-sm: 0 1px 3px rgba(28, 36, 48, 0.06);
    --shadow-md: 0 4px 12px rgba(28, 36, 48, 0.10);
    --shadow-lg: 0 12px 32px rgba(28, 36, 48, 0.16);
}

/* =========================================================================
   Base + semantic mappings
   ========================================================================= */

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-stack);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);
    font-optical-sizing: auto;
    font-kerning: normal;
    color: var(--color-text-primary);
    background: var(--color-bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
}

h1, h2 {
    font-weight: 650;
    letter-spacing: -0.025em;
}

h3, h4 {
    font-weight: 600;
    letter-spacing: -0.015em;
}

h1 { font-size: var(--font-size-xxl); margin: 0 0 var(--space-4) 0; }
h2 { font-size: var(--font-size-xl); margin: var(--space-9) 0 var(--space-4) 0; }
h3 { font-size: var(--font-size-lg); margin: var(--space-7) 0 var(--space-3) 0; }
h4 { font-size: 20px; margin: var(--space-6) 0 var(--space-2) 0; }

p {
    margin: 0 0 var(--space-5) 0;
}

/* COEXISTENCE ADAPTATION: the Ask Guv React island (#guvnor-app and the CTA
   mounts) sizes its type with Tailwind utilities, which sit in @layer and so
   lose to every unlayered element rule above regardless of specificity —
   that's how the panel's 20px title rendered at the 32px h2 ramp. Inside the
   islands, roll these properties back to the layered bundle rules. */
#guvnor-app :is(h1, h2, h3, h4, h5, h6, p),
[data-summarise-button] :is(h1, h2, h3, h4, h5, h6, p) {
    font-size: revert-layer;
    font-weight: revert-layer;
    letter-spacing: revert-layer;
    line-height: revert-layer;
    margin: revert-layer;
}

/* COEXISTENCE ADAPTATION: the DS styles all links, but the legacy Tailwind
   estate carries classed card/button links that must not inherit underlines
   or the visited hue. Scope base link styling to unclassed (prose) links;
   DS components and utilities style their own. */
a:where(:not([class])) {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-thickness: max(1px, .0625rem);
    text-underline-offset: .15em;
}
a:where(:not([class])):hover {
    color: var(--color-link-hover);
    text-decoration-thickness: max(2px, .125rem);
}
a:where(:not([class])):visited { color: var(--color-link-visited); }
a:focus-visible {
    outline: var(--focus-width) solid var(--color-focus);
    outline-offset: var(--focus-offset);
    border-radius: 2px;
    text-decoration: none;
}

code, pre {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.95em;
    background: var(--color-bg-hover);
    padding: 0.125em 0.35em;
    border-radius: 4px;
}


/* =========================================================================
   Guvnor Design System — Typographic system (v4 "Swiss")
   -------------------------------------------------------------------------
   A fully-specified ramp on a strict 4px BASELINE GRID: every role carries
   size · leading (in px, always a multiple of 4) · tracking · weight.
   Nothing is left to the browser default; no unitless leading anywhere.

   Two working families + one quarantined:
   • Bricolage Grotesque — display + headings (the Guvnor voice)
   • Inter               — body, UI, data (optical sizing on)
   • Noto Sans           — ONLY inside official artefacts (official.css)

   Use the .t-* utility classes, or compose from the tokens.
   ========================================================================= */

:root {
    /* ---- Size · leading pairs (px / px — leading on the 4px baseline) ---- */
    --type-display-xl: 64px; --lead-display-xl: 64px;  /* @kind font */
    --type-display-sm: 52px; --lead-display-sm: 56px;  /* @kind font */
    --type-h1: 44px;         --lead-h1: 48px;          /* @kind font */
    --type-h2: 32px;         --lead-h2: 36px;          /* @kind font */
    --type-h3: 24px;         --lead-h3: 28px;          /* @kind font */
    --type-h4: 20px;         --lead-h4: 24px;          /* @kind font */
    --type-h5: 17px;         --lead-h5: 24px;          /* @kind font */
    --type-lead: 21px;       --lead-lead: 32px;        /* @kind font */
    --type-body: 17px;       --lead-body: 28px;        /* @kind font */
    --type-body-sm: 15px;    --lead-body-sm: 24px;     /* @kind font */
    --type-caption: 13px;    --lead-caption: 20px;     /* @kind font */
    --type-overline: 12px;   --lead-overline: 16px;    /* @kind font */
    --type-label: 14px;      --lead-label: 20px;       /* @kind font */
    --type-timestamp: 11px;  --lead-timestamp: 16px;   /* @kind font */

    /* ---- Tracking — tuned per size, tightens as size grows ---- */
    --tracking-display: -0.035em; /* @kind font */
    --tracking-h1: -0.025em;      /* @kind font */
    --tracking-h2: -0.02em;       /* @kind font */
    --tracking-h3: -0.015em;      /* @kind font */
    --tracking-h4: -0.01em;       /* @kind font */
    --tracking-body: 0;           /* @kind font */
    --tracking-caption: 0.005em;  /* @kind font */
    --tracking-caps: 0.1em;       /* @kind font */  /* overline / kicker */
    --tracking-caps-sm: 0.08em;   /* @kind font */  /* timestamps */

    /* ---- Legacy size steps (kept for old demos) ---- */
    --font-size-2xs: 11px;   /* @kind font */
    --font-size-3xs: 12px;   /* @kind font */
    --font-size-lead: 21px;  /* @kind font */
    --font-size-title: 20px; /* @kind font */
    --font-size-2xl: 24px;   /* @kind font */
    --font-size-3xl: 52px;   /* @kind font */
    --font-size-4xl: 64px;   /* @kind font */
    --leading-display: 1;     /* @kind font */
    --leading-heading: 1.1;   /* @kind font */
    --leading-snug: 1.2;      /* @kind font */
    --leading-title: 1.3;     /* @kind font */
    --leading-body: 1.6471;   /* @kind font */
    --leading-relaxed: 1.625; /* @kind font */
    --tracking-tighter: var(--tracking-display); /* @kind font */
    --tracking-tight: var(--tracking-h2);        /* @kind font */
    --tracking-snug: var(--tracking-h3);         /* @kind font */
    --tracking-normal: 0;                        /* @kind font */
    --tracking-wide: var(--tracking-caps-sm);    /* @kind font */
    --tracking-wider: var(--tracking-caps);      /* @kind font */
}

/* =========================================================================
   Role utility classes — family · weight · size · leading · tracking
   ========================================================================= */

/* ---- Display (marketing / hero) ---- */
.t-display-xl {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--type-display-xl);
    line-height: var(--lead-display-xl);
    letter-spacing: var(--tracking-display);
}
.t-display-sm {
    font-family: var(--font-heading);
    font-weight: 650;
    font-size: var(--type-display-sm);
    line-height: var(--lead-display-sm);
    letter-spacing: var(--tracking-display);
}

/* ---- Headings ---- */
.t-h1, .t-super-header {
    font-family: var(--font-heading);
    font-weight: 650;
    font-size: var(--type-h1);
    line-height: var(--lead-h1);
    letter-spacing: var(--tracking-h1);
}
.t-h2, .t-header {
    font-family: var(--font-heading);
    font-weight: 650;
    font-size: var(--type-h2);
    line-height: var(--lead-h2);
    letter-spacing: var(--tracking-h2);
}
.t-h3, .t-subheader {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--type-h3);
    line-height: var(--lead-h3);
    letter-spacing: var(--tracking-h3);
}
.t-h4, .t-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--type-h4);
    line-height: var(--lead-h4);
    letter-spacing: var(--tracking-h4);
}
.t-h5, .t-subtitle {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--type-h5);
    line-height: var(--lead-h5);
    letter-spacing: 0;
}

/* ---- Body (Inter) ---- */
.t-lead {
    font-family: var(--font-stack);
    font-weight: 400;
    font-size: var(--type-lead);
    line-height: var(--lead-lead);
    letter-spacing: -0.005em;
    color: var(--color-text-secondary);
}
.t-body {
    font-family: var(--font-stack);
    font-weight: 400;
    font-size: var(--type-body);
    line-height: var(--lead-body);
    letter-spacing: var(--tracking-body);
}
.t-body-bold {
    font-family: var(--font-stack);
    font-weight: 650;
    font-size: var(--type-body);
    line-height: var(--lead-body);
}
.t-body-sm {
    font-family: var(--font-stack);
    font-weight: 400;
    font-size: var(--type-body-sm);
    line-height: var(--lead-body-sm);
}
.t-caption {
    font-family: var(--font-stack);
    font-weight: 400;
    font-size: var(--type-caption);
    line-height: var(--lead-caption);
    letter-spacing: var(--tracking-caption);
    color: var(--color-text-secondary);
}

/* ---- UI / utility ---- */
.t-overline, .t-kicker {
    font-family: var(--font-stack);
    font-weight: 600;
    font-size: var(--type-overline);
    line-height: var(--lead-overline);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}
.t-label {
    font-family: var(--font-stack);
    font-weight: 600;
    font-size: var(--type-label);
    line-height: var(--lead-label);
    letter-spacing: 0.01em;
}
.t-timestamp {
    font-family: var(--font-stack);
    font-weight: 600;
    font-size: var(--type-timestamp);
    line-height: var(--lead-timestamp);
    letter-spacing: var(--tracking-caps-sm);
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.t-data {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
}

/* ---- Modifiers ---- */
.t-muted     { color: var(--color-text-muted); }
.t-secondary { color: var(--color-text-secondary); }
.t-accent    { color: var(--color-accent-text); }
.t-balance   { text-wrap: balance; }
.t-pretty    { text-wrap: pretty; }
.t-measure   { max-width: var(--measure); }   /* ~66ch at 17px */
.t-measure-narrow { max-width: 26em; }
.t-nums      { font-variant-numeric: tabular-nums; }

/* =========================================================================
   Layout helpers — the column grid
   ========================================================================= */
.grid-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gutter);
}

/* =========================================================================
   Align base element styles to the ramp (overrides colors_and_type sizes)
   ========================================================================= */
h1 { font-size: var(--type-h1); line-height: var(--lead-h1); letter-spacing: var(--tracking-h1); font-weight: 650; }
h2 { font-size: var(--type-h2); line-height: var(--lead-h2); letter-spacing: var(--tracking-h2); font-weight: 650; }
h3 { font-size: var(--type-h3); line-height: var(--lead-h3); letter-spacing: var(--tracking-h3); font-weight: 600; }
h4 { font-size: var(--type-h4); line-height: var(--lead-h4); letter-spacing: var(--tracking-h4); font-weight: 600; }
h5 { font-size: var(--type-h5); line-height: var(--lead-h5); font-weight: 600; }