/* ============================================================================
   brand.css — tenantpin design tokens (2026-07-03 visual rebrand)
   Single source of truth for the brand's fonts + color palette. Linked by
   every page (index via styles.css @import; dashboard/manage/feedback direct).
   Values are locked in branding/Brand Sheet. No component rules live here —
   only the font faces and the :root token layer.
   ============================================================================ */

/* Type pairing: Bricolage Grotesque for display/headings, Karla for body/UI. */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@700;800&family=Karla:wght@400;500;700&display=swap");

:root {
  /* Layout — fixed navbar height (Day 15). Referenced anywhere the map area or
     its overlays need to clear the navbar. Overridden per-breakpoint in-page. */
  --navbar-h: 64px;

  /* Font stacks */
  --font-display: "Bricolage Grotesque", "Karla", system-ui, sans-serif;
  --font-body: "Karla", system-ui, -apple-system, sans-serif;

  /* Brand */
  --color-primary: oklch(58% 0.15 35);        /* terracotta */
  --color-primary-dark: oklch(50% 0.15 35);   /* hover / pressed */
  --color-primary-soft: oklch(96% 0.03 35);   /* tinted primary bg (bands, badges) */
  --color-primary-disabled: oklch(80% 0.07 35);

  /* Neutrals — surfaces */
  --bg: oklch(97% 0.012 75);          /* page background */
  --surface: oklch(99% 0.006 75);     /* cards / panels */
  --surface-2: oklch(97% 0.012 75);   /* inset fills (inputs, sub-panels) */
  --hover-tint: oklch(96% 0.02 55);   /* subtle warm row-hover */

  /* Neutrals — text */
  --text: oklch(20% 0.02 55);           /* headings, values, labels */
  --text-secondary: oklch(45% 0.02 55); /* body paragraphs */
  --text-muted: oklch(52% 0.02 55);     /* captions, hints, de-emphasized */

  /* Neutrals — lines */
  --border: oklch(90% 0.01 75);         /* structural borders */
  --border-strong: oklch(88% 0.01 75);  /* input borders */
  --border-subtle: oklch(93% 0.01 75);  /* row dividers */

  /* Semantic states */
  --success: oklch(55% 0.14 145);
  --warning: oklch(78% 0.15 80);
  --danger: oklch(58% 0.20 25);

  --danger-bg: oklch(96% 0.03 25);
  --danger-border: oklch(87% 0.07 25);
  --danger-text: oklch(45% 0.16 25);

  --warning-bg: oklch(96% 0.045 85);
  --warning-border: oklch(86% 0.10 85);
  --warning-text: oklch(48% 0.11 70);

  /* Persona palette — one hue per CTA/way-in, reused everywhere that persona's
     actions/recommendations show up (CTA buttons, example-card accents,
     recommended-form labels, supply pins). Same L/C, hue-separated so the
     pick-one-of-three CTA bar stays legible. Distinct from --color-primary
     (which drives generic brand actions: submits, links, focus). */
  --c-supply: oklch(60% 0.13 55);
  --c-supply-dark: oklch(52% 0.13 55);
  --c-supply-soft: oklch(96% 0.03 55);
  --c-seek: oklch(55% 0.13 260);
  --c-seek-dark: oklch(47% 0.13 260);
  --c-seek-soft: oklch(96% 0.03 260);
  --c-cohunter: oklch(55% 0.13 320);
  --c-cohunter-dark: oklch(47% 0.13 320);
}