/* ==========================================================================
   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 */

  /* 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);

  /* 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; }
}