/* ==========================================================================
   Succession Radar — Design Tokens
   PromptWorks AI Ltd · Company number 17305850

   Source of truth: BRAND.md
   Do not hard-code colour, size or font values anywhere else in the codebase.
   If a value is needed that does not exist here, add it here first.

   Constraints enforced by this file:
     - No gradients. Flat fills only.
     - Exactly two typefaces (Source Serif 4, Inter).
     - 16px minimum for running text.
     - Signal Amber is reserved for succession-risk state only.

   Served at /css/tokens.css from web/css/, and loaded before /css/site.css
   on every page. tests/test_brand_rules.py holds every other file under web/
   to the rules above, so a hex value, a px font size or a font name written
   anywhere else fails the build.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — self-hosted. No third-party font CDN call.
   The WOFF2 files live in web/fonts/, with their OFL licences; keep these
   five faces only.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/SourceSerif4-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/SourceSerif4-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Primitives — raw values. Never reference these directly in components;
   use the semantic tokens in section 3 instead.
   -------------------------------------------------------------------------- */

:root {
  /* Primary tint scale — Register Navy */
  --sr-navy-50:  #F2F6FA;
  --sr-navy-100: #E1EAF3;
  --sr-navy-200: #C3D5E7;
  --sr-navy-300: #9BB8D4;
  --sr-navy-400: #6C93B8;
  --sr-navy-500: #47709A;
  --sr-navy-600: #33587D;
  --sr-navy-700: #274563;
  --sr-navy-800: #1C3349;  /* brand primary */
  --sr-navy-900: #12222F;

  /* Secondary */
  --sr-steel: #5A6B7A;

  /* Accent — succession-risk signal ONLY */
  --sr-amber: #9A5B00;
  --sr-amber-tint: #FBF3E6;  /* flagged-row background; pairs with --sr-ink */
  --sr-amber-on-navy: #E0A33A; /* the logo's blip on Navy 700 or darker, and
                                  nowhere else: 5.9:1 on navy-800, where
                                  --sr-amber is 2.4:1 */

  /* Neutrals */
  --sr-paper: #FFFFFF;
  --sr-mist:  #F7F8F9;
  --sr-rule:  #DDE2E7;
  --sr-ink:   #12222F;

  /* Status — not brand colours. Use only for system feedback. */
  --sr-success: #0F6B45;   /* 6.5:1 on paper */
  --sr-danger:  #A4232A;   /* 7.4:1 on paper */

  /* Dialog backdrop: Ink at 45%. A scrim, not a surface — nothing is read
     against it. */
  --sr-scrim: rgb(18 34 47 / 0.45);

  /* Third-party marks. Not part of the palette: the colours of other
     companies' logos on the social sign-in buttons, which their own sign-in
     branding rules require, and used inside those logos and nowhere else. */
  --mark-google-blue:     #4285F4;
  --mark-google-green:    #34A853;
  --mark-google-yellow:   #FBBC05;
  --mark-google-red:      #EA4335;
  --mark-microsoft-red:   #F25022;
  --mark-microsoft-green: #7FBA00;
  --mark-microsoft-blue:  #00A4EF;
  --mark-microsoft-yellow:#FFB900;
  --mark-apple:           #000000;
}

/* --------------------------------------------------------------------------
   3. Semantic tokens — reference these in components.
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces */
  --surface-page:      var(--sr-paper);
  --surface-raised:    var(--sr-mist);
  --surface-selected:  var(--sr-navy-100);
  --surface-hover:     var(--sr-navy-50);
  --surface-inverted:  var(--sr-navy-800);
  --surface-flagged:   var(--sr-amber-tint);
  --surface-signal:    var(--sr-amber);      /* the signal badge; Paper on it is 5.4:1 */
  --surface-scrim:     var(--sr-scrim);

  /* Text — every pair below clears WCAG AA on its intended surface */
  --text-body:      var(--sr-ink);      /* 16.2:1 on paper */
  --text-heading:   var(--sr-navy-800); /* 12.9:1 on paper */
  --text-muted:     var(--sr-steel);    /* 5.5:1 on paper, 5.2:1 on mist */
  --text-link:      var(--sr-navy-500); /* 5.2:1 on paper */
  --text-link-hover:var(--sr-navy-600);
  --text-inverted:  var(--sr-paper);    /* 12.9:1 on navy-800 */
  --text-inverted-muted: var(--sr-navy-300); /* labels and source lines on navy-800 only: 6.3:1 */
  --text-signal:    var(--sr-amber);    /* 5.4:1 on paper */
  --text-error:     var(--sr-danger);   /* 7.4:1 on paper */
  --text-success:   var(--sr-success);  /* 6.5:1 on paper */

  /* Borders — 1px solid. Never use box-shadow for separation. */
  --border-default: var(--sr-rule);
  --border-strong:  var(--sr-navy-800);
  --border-focus:   var(--sr-navy-600);
  --border-inverted:var(--sr-navy-700); /* rules inside a navy-800 panel */
  --border-signal:  var(--sr-amber);
  --border-error:   var(--sr-danger);
  --border-success: var(--sr-success);

  /* Actions */
  --action-primary-bg:       var(--sr-navy-800);
  --action-primary-bg-hover: var(--sr-navy-600);
  --action-primary-bg-active:var(--sr-navy-700);
  --action-primary-text:     var(--sr-paper);
  --action-secondary-bg:     transparent;
  --action-secondary-text:   var(--sr-navy-800);
  --action-disabled-bg:      var(--sr-navy-200);
  --action-disabled-text:    var(--sr-steel);

  /* The logo exists in three finishes only (BRAND.md §5): Primary 800 on
     light, Paper on Navy 700 or darker, and 100% black or white. */
  --logo-color:          var(--sr-navy-800);
  --logo-color-inverted: var(--sr-paper);
  /* The radar mark's signal blip, the one part of the mark that does not
     take the lockup's colour. */
  --logo-signal:          var(--sr-amber);
  --logo-signal-inverted: var(--sr-amber-on-navy);

  /* Chart series — fixed order. Amber is index 99, not part of the rotation. */
  --chart-1: var(--sr-navy-800);
  --chart-2: var(--sr-steel);
  --chart-3: var(--sr-navy-400);
  --chart-4: var(--sr-navy-200);
  --chart-risk: var(--sr-amber);
  --chart-grid: var(--sr-rule);

  /* Map markers (BRAND.md §6 Maps): Primary 800 by default, Signal Amber for
     a flagged company only, and the shape differs as well as the colour. */
  --map-marker-default: var(--sr-navy-800);
  --map-marker-flagged: var(--sr-amber);
  --map-marker-outline: var(--sr-paper);
  --map-cluster-bg:     var(--sr-navy-600);
}

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */

:root {
  --font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Weights — only these five exist. Do not request 300 or 700. */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Modular scale — 16px base, 1.25 ratio */
  --size-display: 61px;
  --size-h1: 49px;
  --size-h2: 39px;
  --size-h3: 31px;
  --size-h4: 25px;
  --size-lead: 20px;
  --size-body: 16px;   /* floor for running text */
  --size-label: 16px;
  --size-caption: 13px; /* source lines, footnotes, statutory text only */

  /* The home page hero: the display size, fluid between the mobile and
     desktop stops rather than jumping at 640px. */
  --size-hero: clamp(39px, 4.6vw, 61px);

  /* The wordmark in the horizontal lockup — a logo size, not a type size. */
  --size-wordmark: 22px;
  --size-wordmark-sm: 18px;
  --tracking-wordmark: -0.015em;

  --leading-tight: 1.15;
  --leading-heading: 1.25;
  --leading-lead: 1.5;
  --leading-body: 1.6;
  --leading-caption: 1.4;

  --tracking-heading: -0.01em;
  --tracking-eyebrow: 0.06em;

  --measure: 68ch;
}

@media (max-width: 640px) {
  :root {
    --size-display: 39px;
    --size-h1: 31px;
    --size-h2: 25px;
    --size-h3: 20px;
    --size-lead: 18px;
  }
}

/* --------------------------------------------------------------------------
   5. Space, radius, layout
   -------------------------------------------------------------------------- */

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-sm: 2px;
  --radius-md: 4px;   /* buttons, inputs, cards */
  --radius-pill: 999px; /* badges only */

  --border-width: 1px;

  --header-height: 64px;
  --header-height-mobile: 56px;
  --container-max: 1200px;

  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
}

/* --------------------------------------------------------------------------
   6. Base element defaults
   -------------------------------------------------------------------------- */

html {
  font-size: 100%; /* respect user setting; never set a px root size */
}

body {
  font-family: var(--font-body);
  font-size: var(--size-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--text-heading);
  /* Sentence case. Never text-transform: uppercase on a heading. */
}

h1 { font-size: var(--size-h1); line-height: var(--leading-tight); }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); }
h4 { font-size: var(--size-h4); }

p { max-width: var(--measure); }

a {
  color: var(--text-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--text-link-hover); }

:focus-visible {
  outline: var(--focus-ring-width) solid var(--border-focus);
  outline-offset: var(--focus-ring-offset);
}

/* Tabular figures are mandatory for all numeric data.
   Company numbers, dates, currency, counts, percentages. */
table, .tabular, [data-numeric], td, th {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

caption, .caption, footer small {
  font-size: var(--size-caption);
  line-height: var(--leading-caption);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   7. Leaflet overrides — the map must not import its own palette.
   leaflet.css arrives with its own type stack, link colour, 12px text and
   drop shadows on the popup, its tip and the zoom control. All overridden.
   -------------------------------------------------------------------------- */

.leaflet-container {
  font-family: var(--font-body);
  font-size: var(--size-body);
}
.leaflet-container a { color: var(--text-link); }
.leaflet-popup-content-wrapper {
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--border-default);
  box-shadow: none;
}
.leaflet-popup-content {
  font-size: var(--size-body);
  line-height: var(--leading-body);
}
.leaflet-popup-tip {
  box-shadow: none;
  border: var(--border-width) solid var(--border-default);
}
.leaflet-bar,
.leaflet-touch .leaflet-bar {
  box-shadow: none;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
}
.leaflet-bar a,
.leaflet-bar a:hover { color: var(--text-heading); }
.leaflet-control-attribution,
.leaflet-control-attribution a {
  font-size: var(--size-caption);
}
.leaflet-marker-default { color: var(--sr-navy-800); }
.leaflet-marker-flagged { color: var(--sr-amber); } /* succession risk only */

/* --------------------------------------------------------------------------
   8. Print — letterhead, invoices, exported reports.
   Must remain legible on a mono laser printer.
   -------------------------------------------------------------------------- */

@media print {
  body { background: #FFF; color: #000; font-size: 10.5pt; }
  h1, h2, h3, h4 { color: #000; }
  a { color: #000; text-decoration: underline; }
  .no-print { display: none !important; }
  /* Flagged rows must not rely on colour in print — pair with a text label. */
  .row-flagged { background: transparent; border-left: 2pt solid #000; }
}

/* --------------------------------------------------------------------------
   9. The canvas layer — web/css/canvas.css
   A warm page ground with white cards on it, pill actions, a segmented
   control, chips and scroll-reveal motion. Added 8 Oct 2026 for the home
   page restyle. Every rule above still holds: the cards are separated by
   their 1px rule and the ground's tint, never a shadow.
   -------------------------------------------------------------------------- */

:root {
  --sr-canvas:      #F6F5F1;   /* the ground; Paper cards sit on it */
  --sr-canvas-rule: #E6E3DC;   /* a rule drawn on the ground */

  --surface-canvas:    var(--sr-canvas);
  --border-canvas:     var(--sr-canvas-rule);
  /* The sticky header lets the page show through it. */
  --surface-header:    color-mix(in srgb, var(--sr-canvas) 82%, transparent);
  --surface-nav-hover: color-mix(in srgb, var(--sr-navy-800) 7%, transparent);

  --radius-lg:     20px;   /* cards on the canvas */
  --radius-xl:     28px;   /* the closing band */
  --radius-action: 999px;  /* pill buttons, chips and the segmented control */

  /* Display sizes for the canvas home page. The hero is set in the body
     face at the regular weight; the serif stays on the inner pages. */
  --size-display-xl: clamp(40px, 4.7vw, 66px);
  --size-section:    clamp(31px, 3.2vw, 44px);
  --size-stat:       clamp(44px, 5vw, 64px);
  --size-price:      44px;

  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --dur-reveal:  .8s;
  --dur-stagger: .7s;
}

/* --------------------------------------------------------------------------
   10. Depth and washes
   Owner decision, 8 October 2026: the site may go beyond BRAND.md's flat
   rules. Depth is still tokenised — a shadow or a gradient is written here
   and referenced everywhere else (tests/test_brand_rules.py holds that), so
   the whole site's depth is four values, not forty.
   -------------------------------------------------------------------------- */

:root {
  /* Shadows are the navy at low alpha, so they read as the paper lifting off
     the ground rather than as grey smudges. */
  --shadow-card:  0 1px 2px rgba(27, 44, 62, .05), 0 12px 32px -14px rgba(27, 44, 62, .16);
  --shadow-lift:  0 2px 4px rgba(27, 44, 62, .06), 0 22px 44px -16px rgba(27, 44, 62, .24);
  --shadow-pop:   0 1px 2px rgba(27, 44, 62, .08), 0 8px 24px -8px rgba(27, 44, 62, .22);
  --shadow-field: 0 0 0 4px rgba(27, 44, 62, .08);

  /* Washes: the ground tinted towards the navy at the top of a page, and
     towards the paper under a band. Flat colour elsewhere. */
  --wash-hero:    linear-gradient(180deg, rgba(27, 44, 62, .045) 0%, rgba(27, 44, 62, 0) 60%);
  --wash-band:    linear-gradient(135deg, var(--sr-navy-800) 0%, var(--sr-navy-900) 100%);
  --wash-card:    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(27, 44, 62, .025) 100%);

  --radius-field: 12px;   /* inputs and selects on the canvas */
}