/* ==========================================================================
   NYCuriosity brand tokens
   --------------------------------------------------------------------------
   The single source of brand truth for page chrome on data.nycuriosity.com.
   Implements NYCuriosity Brand Guide v1.0 (2026), Vanessa Wong.
   Written spec, including every deviation and why: brand_redesign/brand_spec.md

   chart.css consumes these for the chart system. Page chrome consumes them
   directly. A future rebrand is an edit to this file, so never hardcode a
   brand colour, font or radius in page HTML.

   Load before chart.css:
     <link rel="stylesheet" href="/assets/brand.css">
     <link rel="stylesheet" href="/assets/chart.css">

   Fonts required on the page:
     Playfair+Display:wght@400;500;600;700
     JetBrains+Mono:wght@400;500;600;700
     Inter:wght@400;500;600;700          (Helvetica fallback, see --b-sans)
   ========================================================================== */

:root {
  /* This is a light-only design. Declaring the scheme stops browsers in dark
     mode from auto-darkening form controls and scrollbars, which would leave
     invisible text in the tracker search boxes and selects. */
  color-scheme: light;

  /* ---- palette, verbatim from the guide ------------------------------- */
  --b-tangerine:  #F26522;  /* Primary Surface & Anchors. Dominant, 60%. */
  --b-cream:      #FAF6F1;  /* Backgrounds & Canvas. Foundation, 25%.    */
  --b-chartreuse: #B5B226;  /* Bold Accents & Signals. RESERVED, see below */
  --b-brown:      #A44D00;  /* Earthy Warmth & Grounding. 10%.           */
  --b-lightblue:  #89C4E1;  /* Friendly Contrast & Accents.              */
  --b-marigold:   #FFD23F;  /* Highlights & Badges.                      */
  --b-fuchsia:    #E84C8A;  /* Soft Accents & Tags.                      */

  /* Chartreuse is reserved for alerts, anomalies and critical thresholds.
     Never a routine data series, never decorative emphasis. The guide's
     mockups break this rule; its written rule governs. brand_spec.md §2.5 */

  /* ---- derived, because the guide names none -------------------------- */
  /* Warm near-black family. Neutral grays would fight the earthy palette. */
  --b-ink:    #1A1208;  /* titles, emphasis.        17.2:1 on cream */
  --b-ink-2:  #4A3B2C;  /* body, deck.              10.0:1 on cream */
  --b-ink-3:  #6B5B4A;  /* ticks, captions, source.  6.1:1 on cream, AA small */
  --b-ink-4:  #9A8B7A;  /* decorative only. Never body text.        */

  --b-surface:      #FFFFFF;  /* card ground, lifts off the cream page */
  --b-surface-2:    #FAF6F1;  /* card footer ground = Canvas Cream     */
  --b-surface-dark: #170C03;  /* dark chrome. Sampled from favicon_1.  */

  --b-line:        #E7DDCE;  /* borders and gridlines, warm         */
  --b-line-strong: #D3C4AF;  /* zero baseline, one step darker      */

  /* Tangerine is 3.15:1, so white text on it fails AA at normal size. This is
     Tangerine darkened to 4.50:1 measured against CANVAS CREAM, not white —
     cream is the page ground, so it is the background that actually matters.
     (Against white it clears 4.84:1.) Used for filled buttons, links, and any
     tangerine surface that must carry small text. */
  --b-tangerine-deep: #C84609;
  /* Tangerine is "Primary Surface & Anchors", dominant at 60%, so the
     interactive colour is Tangerine — but only via --b-tangerine-deep,
     the one tangerine that passes AA as normal-size text. Brown is the
     grounding colour at 10% and carries quiet labels. brand_spec.md §2.2 */
  --b-link:       var(--b-tangerine-deep);
  --b-link-hover: var(--b-brown);
  /* Light accent for text ON the dark surface, where Tangerine reads muddy. */
  --b-on-dark:        var(--b-marigold);
  --b-on-dark-quiet:  #C9BCAB;

  /* ---- type ------------------------------------------------------------ */
  /* Helvetica is specified but is not freely licensed and is not on Google
     Fonts. Apple devices render it for real; everything else falls to Arial
     (metrically near-identical) then Inter. brand_spec.md §3.1 */
  --b-sans:    'Helvetica Neue', Helvetica, Arial, 'Inter', system-ui, sans-serif;
  --b-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --b-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Guide: headline 56px/105%, body 15px/120%. 120% is kept for compact UI
     text and relaxed to 155% for running prose. brand_spec.md §3.2 */
  --b-lh-display: 1.05;
  --b-lh-tight:   1.2;
  --b-lh-prose:   1.55;

  /* ---- topic colours ---------------------------------------------------
     Colour encodes what KIND of thing a card, tag or pill is. Each topic has
     a bright fill and a darkened text twin; the fills are 1.4-3.6:1 and can
     never carry small text, so labels always use the -ink variant, which is
     tuned to 4.5:1 against Canvas Cream.

     Decorative glyph art is NOT bound to these — it rotates the whole palette
     for variety (Tal, Sep 2026). Only informational colour is topic-coded. */
  --b-topic-transit:      var(--b-lightblue);
  --b-topic-transit-ink:  #2779A1;
  --b-topic-cb:           var(--b-fuchsia);
  --b-topic-cb-ink:       #DA1966;
  --b-topic-budget:       var(--b-tangerine);
  --b-topic-budget-ink:   #C84609;
  --b-topic-govtech:      var(--b-marigold);
  --b-topic-govtech-ink:  #8E6C00;

  /* ---- shape ----------------------------------------------------------- */
  --b-radius:    10px;
  --b-radius-sm: 6px;
  --b-shadow:    0 1px 3px rgba(26, 18, 8, 0.10);
  --b-shadow-lg: 0 6px 20px rgba(26, 18, 8, 0.10);
}