/* =========================================================================
   Palimpsest NYC — Colors & Type
   ─────────────────────────────────────────────────────────────────────────
   Source of truth for the brand. Import this file at the root of any
   prototype, slide deck, or UI mock and use the variables / classes below.

       <link rel="stylesheet" href="../colors_and_type.css" />

   Design DNA: an *illuminated atlas*. The walking-tour product feels like
   a storybook map of the city — saturated cobalt blues for the page, hot
   magenta for landmarks, soft sky for tints. Joyful, cartographic, a
   little theatrical. Not corporate, not pastel, not "AI startup."
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. Color tokens
   ─────────────────────────────────────────────────────────────────────────
   Sourced from the project's reference palette:

     deep magenta  #77295D    hot pink     #C34FA2    ice blue   #EDF1FD
     sky blue      #77B7F0    royal blue   #5364C0

   Roles:
     • cobalt (royal blue) — primary structural color, replaces "navy".
       Headings, structural rules, primary buttons.
     • magenta (hot pink)  — highlight / accent, replaces "brick".
       Key numbers, links, active state.
     • plum  (deep magenta)— deep accent, used for high-contrast text on
       light surfaces, dramatic display, reverse-print logo.
     • sky   (sky blue)    — secondary surface, tints, hover bg.
     • ice   (ice blue)    — page background. The "paper" of the brand.
   ------------------------------------------------------------------------- */

:root {
  /* ----- Core surfaces (the "page") ----- */
  --ice:              #EDF1FD;   /* primary page background */
  --ice-2:            #DCE3F7;   /* slightly aged — code blocks, cards */
  --ice-3:            #C7D1ED;   /* deeper — dividers between sections */
  --ice-rule:         #B6C2E0;   /* hairline rules, table borders */
  --paper:            #F8FAFE;   /* lightest tier — popovers, input bg */
  --white:            #FFFFFF;

  /* ----- Inks (text & UI line) ----- */
  --ink:              #1B1233;   /* body text — deep indigo-black */
  --ink-2:            #3D3358;   /* secondary text */
  --ink-3:            #6B6086;   /* muted / tertiary text, captions */
  --ink-4:            #A39CB8;   /* placeholders, disabled */

  /* ----- Brand primaries ----- */
  --cobalt:           #5364C0;   /* primary — headings, structure */
  --cobalt-2:         #4252AA;   /* hover */
  --cobalt-3:         #8A97D5;   /* tinted, for chips/borders */
  --cobalt-tint:      #E0E5F5;   /* very pale — selected row, badge bg */

  --magenta:          #C34FA2;   /* highlight — key numbers, links */
  --magenta-2:        #A93C8B;   /* hover */
  --magenta-3:        #DC8AC2;   /* tinted */
  --magenta-tint:     #F6E1EE;   /* very pale — citation chip bg */

  /* ----- Secondary accents (used sparingly, for warmth) ----- */
  --plum:             #77295D;   /* deep magenta — display, dramatic accent */
  --plum-2:           #5C1D47;   /* deepest, almost-black plum */
  --sky:              #77B7F0;   /* sky blue — park / nature pin, info chips */
  --sky-2:            #5AA1E0;   /* deeper sky for hover */
  --sky-tint:         #DDECFA;   /* pale sky — info chip bg */

  /* ----- Semantic ----- */
  --bg:               var(--ice);
  --bg-elevated:      var(--paper);
  --bg-sunken:        var(--ice-2);
  --fg:               var(--ink);
  --fg-2:             var(--ink-2);
  --fg-muted:         var(--ink-3);
  --fg-disabled:      var(--ink-4);
  --accent:           var(--magenta);
  --accent-fg:        var(--white);
  --link:             var(--magenta);
  --rule:             var(--ice-rule);
  --border:           var(--ice-rule);
  --focus-ring:       rgba(83, 100, 192, 0.55);   /* cobalt @ 55% */

  /* status — kept on-brand, never neon */
  --success:          #4FA876;   /* a tealy green, harmonises with sky */
  --warning:          #E8A23A;   /* amber */
  --danger:           #C34FA2;   /* magenta itself reads as alert here */
  --info:             #5364C0;

  /* ----- Source-type accents (one color per archival source) ----- */
  --src-wikipedia:    var(--plum);       /* deep magenta */
  --src-osm:          var(--cobalt);     /* royal blue */
  --src-chronicling:  var(--magenta);    /* hot pink — newsprint highlight */
  --src-nypl:         var(--plum-2);     /* deepest plum */
  --src-nyc-open:     var(--sky-2);      /* sky blue */

  /* ----- Legacy aliases — older files reference --parchment / --navy / --brick.
     Keep them aliased so nothing 404s during the rebrand transition. ----- */
  --parchment:        var(--ice);
  --parchment-2:      var(--ice-2);
  --parchment-3:      var(--ice-3);
  --parchment-rule:   var(--ice-rule);
  --ivory:            var(--paper);
  --navy:             var(--cobalt);
  --navy-2:           var(--cobalt-2);
  --navy-3:           var(--cobalt-3);
  --navy-tint:        var(--cobalt-tint);
  --brick:            var(--magenta);
  --brick-2:          var(--magenta-2);
  --brick-3:          var(--magenta-3);
  --brick-tint:       var(--magenta-tint);
  --moss:             var(--sky-2);
  --ochre:            var(--sky);
  --ochre-tint:       var(--sky-tint);
  --slate:            var(--cobalt-3);
}


/* -------------------------------------------------------------------------
   2. Webfont declarations
   -------------------------------------------------------------------------
   We use real font files from /fonts/. They are open-licensed (OFL):
     • Cormorant Garamond — display / titles (high-contrast, joyful curves)
     • Inter              — UI / body sans
     • JetBrains Mono     — code, citations, doc_ids
   ------------------------------------------------------------------------- */

@font-face { font-family: "Cormorant Garamond"; src: url("./fonts/CormorantGaramond-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("./fonts/CormorantGaramond-Medium.woff2")  format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("./fonts/CormorantGaramond-Bold.woff2")    format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("./fonts/CormorantGaramond-Italic.woff2")  format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

@font-face { font-family: "EB Garamond"; src: url("./fonts/EBGaramond-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("./fonts/EBGaramond-Italic.woff2")  format("woff2"); font-weight: 400; font-style: italic; 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; }

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


/* -------------------------------------------------------------------------
   3. Type tokens
   ------------------------------------------------------------------------- */

:root {
  --font-display: "Cormorant Garamond", "Garamond", Georgia, serif;
  --font-serif:   "EB Garamond", "IBM Plex Serif", Georgia, serif;
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, Consolas, monospace;

  /* sizes */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   30px;
  --fs-3xl:   40px;
  --fs-4xl:   56px;
  --fs-5xl:   72px;
  --fs-6xl:   96px;
  --fs-7xl:   128px;

  /* line heights */
  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  /* spacing scale (4px base) */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* radii — softer than before. brand is bouncy now. */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* hairlines */
  --hairline: 1px solid var(--rule);
  --hairline-strong: 1px solid var(--cobalt);

  /* shadows — soft, paper-on-paper. avoid drop-shadow blur halos. */
  --shadow-sm: 0 1px 0 rgba(27, 18, 51, 0.04), 0 1px 2px rgba(27, 18, 51, 0.06);
  --shadow-md: 0 1px 0 rgba(27, 18, 51, 0.05), 0 6px 18px rgba(83, 100, 192, 0.10);
  --shadow-lg: 0 2px 0 rgba(27, 18, 51, 0.05), 0 14px 36px rgba(83, 100, 192, 0.18);
  --shadow-inset: inset 0 0 0 1px var(--rule);
}


/* -------------------------------------------------------------------------
   4. Base elements + semantic classes
   ------------------------------------------------------------------------- */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  color: var(--cobalt);
  letter-spacing: -0.005em;
  margin: 0 0 var(--sp-4) 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  color: var(--cobalt);
  margin: 0 0 var(--sp-3) 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--cobalt);
  margin: 0 0 var(--sp-3) 0;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--ink);
  letter-spacing: 0.01em;
  margin: 0 0 var(--sp-2) 0;
}

h5, .h5, .eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-xs);
  line-height: 1;
  color: var(--magenta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 var(--sp-3) 0;
}

p, .p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--ink);
  margin: 0 0 var(--sp-4) 0;
  text-wrap: pretty;
}

.lede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--plum);
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

/* The signature "big number" — the 928, 100%, 120 of the milestone deck. */
.bignum {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-7xl);
  line-height: 0.95;
  color: var(--magenta);
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
}

/* Code, citations, doc_ids — JetBrains Mono on tinted ice */
code, .code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--ink);
}
code, .code {
  background: var(--ice-2);
  padding: 1px 5px;
  border-radius: var(--r-sm);
}
pre {
  background: var(--ice-2);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  border: var(--hairline);
  overflow-x: auto;
  line-height: 1.55;
}
/* SSE event keywords inside <pre> get the magenta highlight */
.tok-event { color: var(--magenta); font-weight: 500; }
.tok-key   { color: var(--cobalt); }
.tok-str   { color: var(--ink-2); }

a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease;
}
a:hover { border-bottom-color: var(--link); }

hr, .rule {
  border: 0;
  border-top: var(--hairline);
  margin: var(--sp-6) 0;
}

::selection {
  background: var(--magenta-tint);
  color: var(--plum);
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}