/*
 * Scott IPC — design tokens
 *
 * Extracted from the design system (apps/map/design/design-system-1..5.png).
 * These tokens are the source of truth for visual styling across the map web
 * app. When the Figma system changes, update this file and the change
 * propagates everywhere.
 *
 * Naming convention follows the Figma variable names exactly:
 *   --color-brand-blue, --color-text-primary, etc.
 *
 * Status colors (renewal urgency) are FUNCTIONAL, not brand — kept distinct
 * from brand green so primary CTAs (using brand green) don't visually compete
 * with active-status map pins.
 */

:root {
  /* ───── Brand: Blue ───── */
  --color-brand-blue:       #0060A9;  /* Primary brand, links, primary buttons (secondary CTA stroke) */
  --color-brand-blue-dark:  #043C6E;  /* Depth and contrast on dark surfaces */
  --color-brand-blue-deep:  #061E3C;  /* Dark section backgrounds */
  --color-brand-blue-deeper:#041226;  /* Footer, deepest navy */
  --color-brand-blue-light: #B5D4F4;  /* Body text on dark backgrounds */

  /* ───── Brand: Green ───── */
  --color-brand-green:       #008752;  /* Secondary accent, PRIMARY CTAs */
  --color-brand-green-light: #5DCAA5;  /* Eyebrow accents on dark */

  /* ───── Text ───── */
  --color-text-primary:   #0E1624;  /* Body text on white */
  --color-text-secondary: #4B596E;  /* Secondary body text on white */
  --color-text-on-dark:   #FFFFFF;  /* White text on navy surfaces */
  --color-text-on-dark-secondary: var(--color-brand-blue-light);

  /* ───── Surfaces ───── */
  --color-bg-tinted:    #F7F8FC;  /* Tinted section background */
  --color-bg-white:     #FFFFFF;
  --color-bg-dark:      var(--color-brand-blue-deep);
  --color-border-light: #E2E8F0;  /* Card borders, dividers */

  /* ───── Renewal status palette (seven-state) ─────
     Source of truth: status_model_spec.md §3. Each token corresponds to
     a value emitted by fact_renewals_expected.status. */
  /* Re-tuned 2026-06-11 for contrast on the muted basemap (pin_redesign review):
     the approaching/due-now double-amber was indistinguishable at pin size;
     active teal and no-renewable pale blue both sank into the water tone. */
  --status-recently:     #008752;  /* recently_renewed — brand green (kept) */
  --status-active:       #3D7FA6;  /* active — steel blue; was #87B5C8 (washed out on water) */
  --status-approaching:  #D99A26;  /* approaching — clear amber; was #C9A435 */
  --status-due-now:      #C2581C;  /* due_now — burnt orange, splits the amber ramp; was #A8801A */
  --status-at-risk:      #B3264A;  /* at_risk — crimson; was #B83660 */
  --status-dormant:      #5B6472;  /* dormant — slate, one step darker; was #6B7280 */
  --status-no-renewable: #8CA3B8;  /* slate blue-gray; was #B5D4F4 (water-colored, vanished) */

  /* ───── Typography ───── */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Type scale — direct from Figma. Numbers are px / line-height %. */

  /* Display/H1 Hero — Inter Semi Bold, 48 / 110% / -1px tracking */
  --type-h1-size: 48px;
  --type-h1-line: 1.10;
  --type-h1-tracking: -1px;
  --type-h1-weight: 600;

  /* Display/H2 Section — Inter Semi Bold, 40 / 120% / -1px */
  --type-h2-size: 40px;
  --type-h2-line: 1.20;
  --type-h2-tracking: -1px;
  --type-h2-weight: 600;

  /* Display/H3 Card — Inter Semi Bold, 24 / 130% / -0.4px */
  --type-h3-size: 24px;
  --type-h3-line: 1.30;
  --type-h3-tracking: -0.4px;
  --type-h3-weight: 600;

  /* Label/Eyebrow — Inter Bold, 12 / 120% / 16% letterspacing (UPPERCASE) */
  --type-eyebrow-size: 12px;
  --type-eyebrow-line: 1.20;
  --type-eyebrow-tracking: 0.16em;
  --type-eyebrow-weight: 700;
  --type-eyebrow-transform: uppercase;

  /* Body/Lead — Inter Regular, 17 / 165% */
  --type-body-lead-size: 17px;
  --type-body-lead-line: 1.65;
  --type-body-lead-weight: 400;

  /* Body/Default — Inter Regular, 16 / 165% */
  --type-body-size: 16px;
  --type-body-line: 1.65;
  --type-body-weight: 400;

  /* Body/Card — Inter Regular, 15 / 170% */
  --type-body-card-size: 15px;
  --type-body-card-line: 1.70;
  --type-body-card-weight: 400;

  /* Body/Small — Inter Regular, 14 / 165% */
  --type-body-small-size: 14px;
  --type-body-small-line: 1.65;
  --type-body-small-weight: 400;

  /* Button/Label — Inter Semi Bold, 15 / 100% */
  --type-button-size: 15px;
  --type-button-line: 1.0;
  --type-button-weight: 600;

  /* ───── Effects ───── */

  /* Card/Default Shadow — subtle elevation on white */
  --shadow-card: 0 1px 2px rgba(14, 22, 36, 0.04), 0 4px 12px rgba(14, 22, 36, 0.06);

  /* Button/Primary Glow — saturated green halo */
  --shadow-button-primary: 0 4px 14px rgba(0, 135, 82, 0.30);

  /* Button/Secondary Glow — cool blue halo for secondary on light */
  --shadow-button-secondary: 0 4px 14px rgba(0, 96, 169, 0.20);

  /* Image/Drop Shadow — for raised image elements (e.g., iPad mockups) */
  --shadow-image: 0 12px 32px rgba(14, 22, 36, 0.18);

  /* ───── Radii ───── */
  /* Per the system: Card uses 12px corner radius (Surface/Card spec) */
  --radius-card: 12px;
  --radius-button: 8px;   /* Inferred — Figma source likely confirms */
  --radius-pill: 9999px;  /* For Client Portal-style pill buttons */

  /* ───── Spacing scale ───── */
  /* Not explicitly enumerated in the screenshots; using an 8-point scale that
     visually matches the system's padding and gap patterns. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ───── Z-layers ───── */
  --z-map: 1;
  --z-sidebar: 10;
  --z-drawer: 20;
  --z-modal: 30;
  --z-toast: 40;
}

/* ───── Reusable text style classes ─────
   Apply these by class name rather than setting raw font properties on
   elements. Mirrors the Figma "apply by style name" pattern. */

.type-h1 {
  font-family: var(--font-family);
  font-weight: var(--type-h1-weight);
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-line);
  letter-spacing: var(--type-h1-tracking);
}

.type-h2 {
  font-family: var(--font-family);
  font-weight: var(--type-h2-weight);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line);
  letter-spacing: var(--type-h2-tracking);
}

.type-h3 {
  font-family: var(--font-family);
  font-weight: var(--type-h3-weight);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line);
  letter-spacing: var(--type-h3-tracking);
}

.type-eyebrow {
  font-family: var(--font-family);
  font-weight: var(--type-eyebrow-weight);
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-line);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: var(--type-eyebrow-transform);
  color: var(--color-brand-green);
}

.type-body-lead {
  font-family: var(--font-family);
  font-weight: var(--type-body-lead-weight);
  font-size: var(--type-body-lead-size);
  line-height: var(--type-body-lead-line);
}

.type-body {
  font-family: var(--font-family);
  font-weight: var(--type-body-weight);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
}

.type-body-card {
  font-family: var(--font-family);
  font-weight: var(--type-body-card-weight);
  font-size: var(--type-body-card-size);
  line-height: var(--type-body-card-line);
}

.type-body-small {
  font-family: var(--font-family);
  font-weight: var(--type-body-small-weight);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line);
}

.type-button {
  font-family: var(--font-family);
  font-weight: var(--type-button-weight);
  font-size: var(--type-button-size);
  line-height: var(--type-button-line);
}

/* ───── Reusable component classes ─────
   These mirror the Figma component library. The map app uses them directly
   for buttons, cards, eyebrows, etc. */

.surface-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.button-primary {
  background: var(--color-brand-green);
  color: var(--color-text-on-dark);
  border: none;
  border-radius: var(--radius-button);
  padding: var(--space-3) var(--space-5);
  box-shadow: var(--shadow-button-primary);
  cursor: pointer;
  font-family: var(--font-family);
  font-weight: var(--type-button-weight);
  font-size: var(--type-button-size);
  line-height: var(--type-button-line);
  transition: filter 150ms ease, transform 150ms ease;
}

.button-primary:hover {
  filter: brightness(1.05);
}

.button-primary:active {
  transform: translateY(1px);
}

.button-secondary-on-light {
  background: transparent;
  color: var(--color-brand-blue);
  border: 1.5px solid var(--color-brand-blue);
  border-radius: var(--radius-button);
  padding: var(--space-3) var(--space-5);
  cursor: pointer;
  font-family: var(--font-family);
  font-weight: var(--type-button-weight);
  font-size: var(--type-button-size);
  line-height: var(--type-button-line);
  transition: box-shadow 150ms ease, background 150ms ease;
}

.button-secondary-on-light:hover {
  box-shadow: var(--shadow-button-secondary);
}

.button-secondary-on-dark {
  background: transparent;
  color: var(--color-text-on-dark);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-button);
  padding: var(--space-3) var(--space-5);
  cursor: pointer;
  font-family: var(--font-family);
  font-weight: var(--type-button-weight);
  font-size: var(--type-button-size);
  line-height: var(--type-button-line);
}

/* Eyebrow on dark surfaces uses the lighter green */
.surface-dark .type-eyebrow,
.type-eyebrow.on-dark {
  color: var(--color-brand-green-light);
}

/* ───── Pin styling helpers (map-specific) ─────
   The map web app uses these to color SVG pins by renewal status. */
.pin-recently-renewed { fill: var(--status-recently); }
.pin-active           { fill: var(--status-active); }
.pin-approaching      { fill: var(--status-approaching); }
.pin-due-now          { fill: var(--status-due-now); }
.pin-at-risk          { fill: var(--status-at-risk); }
.pin-dormant          { fill: var(--status-dormant); }
.pin-no-renewable     { fill: var(--status-no-renewable); }