/* =============================================================
   URBAN TECH HUB — at Cornell Tech
   Foundational color + type tokens
   -------------------------------------------------------------
   Brand: Jacobs Technion-Cornell Institute · Urban Tech Hub
   Voice: considered, refined, editorial. Applied urban-tech
   research, presented with restraint — "computers and the city,"
   the quiet version. A single deep oxblood carnelian over a true-
   neutral paper-to-ink scale, with a muted secondary palette for
   data. Hairline structure, generous margins, minimal shadow.

   NOTE ON FONTS: the brand's production webfonts were not
   provided. This refresh uses Newsreader (display serif), Hanken
   Grotesk (text sans) and IBM Plex Mono (code/data only), loaded
   from Google Fonts below — a license-clear, refined stand-in.
   Swap @font-face sources here if the real files arrive.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ---- BRAND : Carnelian, refined ----------------------------
     A deep, muted oxblood carnelian — closer to Cornell's
     institutional red than the old hot coral, dialled down to
     read elegant rather than loud. The single hero accent: used
     sparingly for emphasis, links, active states and the rare
     color-block. (Old --carnelian-* names kept as aliases so
     existing components keep working.) */
  --brand:            #842A2A;   /* hero — deep carnelian */
  --brand-dark:       #6E2222;   /* hover                 */
  --brand-press:      #5A1C1C;   /* pressed               */
  --brand-deep:       #5A1C1C;   /* deep / on-light text  */
  --brand-tint:       #F4EAE9;   /* soft wash — chips     */
  --brand-tint-2:     #E3CCCB;   /* stronger wash/border  */

  --carnelian:        var(--brand);        /* alias */
  --carnelian-dark:   var(--brand-dark);   /* alias */
  --carnelian-deep:   var(--brand-deep);   /* alias */
  --carnelian-tint:   var(--brand-tint);   /* alias */
  --carnelian-tint-2: var(--brand-tint-2); /* alias */

  /* ---- NEUTRALS : True neutral, paper → ink -----------------
     Balanced grays — neither cool-blue nor warm-cream. Bright
     paper at the top, near-black ink at the bottom. This carries
     almost the entire interface. */
  --ink:        #1A1A1C;   /* headlines, primary text  */
  --graphite:   #3A3A3D;   /* strong secondary text    */
  --slate:      #5E5E62;   /* body on light, muted     */
  --steel:      #8C8C90;   /* captions, placeholder    */
  --mist:       #BDBDC0;   /* disabled, hairline-on-color */
  --fog:        #DCDCDE;   /* default borders          */
  --cloud:      #EFEFF0;   /* subtle surface / fills   */
  --haze:       #F7F7F8;   /* page tint / alt rows     */
  --paper:      #FFFFFF;   /* base bright background    */

  /* ---- SECONDARY : Muted, for data ---------------------------
     A quiet, desaturated palette — all low chroma and mid
     lightness so they sit together calmly. For charts, tags,
     category coding and the occasional fill. Use ONE alongside
     carnelian per view; never a rainbow. (Token names retained
     from the previous system for compatibility.) */
  --electric:      #3F5A73;  /* muted slate-blue */
  --electric-tint: #E9EDF1;
  --sky:           #4B7A78;  /* muted teal       */
  --sky-tint:      #E6EEED;
  --grass:         #4F6B52;  /* muted sage/forest */
  --grass-tint:    #E9EEE8;
  --sun:           #9A7B3F;  /* muted ochre/gold  */
  --sun-tint:      #F1ECDF;
  --tangerine:     #9C5B43;  /* muted clay        */
  --tangerine-tint:#F1E6DF;

  /* legacy aliases (semantic states) */
  --signal-blue:       var(--electric);
  --signal-green:      var(--grass);
  --signal-amber:      #8A6A2E;
  --signal-amber-tint: var(--sun-tint);

  /* ============================================================
     SEMANTIC TOKENS — reference these in product CSS
     ============================================================ */
  --bg:            var(--paper);
  --bg-subtle:     var(--haze);
  --bg-sunken:     var(--cloud);
  --bg-inverse:    var(--ink);

  --surface:       var(--paper);
  --surface-raised:var(--paper);

  --border:        var(--fog);
  --border-strong: var(--mist);
  --border-ink:    var(--ink);
  --hairline:      var(--fog);   /* @kind color */

  --text:          var(--ink);
  --text-secondary:var(--graphite);
  --text-muted:    var(--slate);
  --text-subtle:   var(--steel);
  --text-on-dark:  var(--paper);
  --text-on-accent:#FFFFFF;

  --accent:        var(--carnelian);
  --accent-hover:  var(--carnelian-dark);
  --accent-wash:   var(--carnelian-tint);
  --link:          var(--carnelian);
  --focus-ring:    var(--signal-blue);

  /* ---- TYPE FAMILIES ---------------------------------------- */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;        /* @kind font */
  --font-sans:    'Hanken Grotesk', system-ui, -apple-system, Segoe UI, sans-serif; /* @kind font */
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;  /* @kind font */

  /* ---- WEIGHTS ---------------------------------------------- */
  --w-regular: 400;   /* @kind other */
  --w-medium:  500;   /* @kind other */
  --w-semibold:600;   /* @kind other */
  --w-bold:    700;   /* @kind other */

  /* ---- FLUID TYPE SCALE  (1.250 major-third, eased) ----------
     Display set in Newsreader; relaxed tracking, generous leading
     — refined and editorial, not flush-and-tight. */
  --step--1: clamp(0.80rem, 0.78rem + 0.10vw, 0.86rem);  /* @kind other */
  --step-0:  clamp(1.00rem, 0.97rem + 0.16vw, 1.09rem);  /* @kind other */
  --step-1:  clamp(1.20rem, 1.13rem + 0.34vw, 1.40rem);  /* @kind other */
  --step-2:  clamp(1.45rem, 1.32rem + 0.60vw, 1.85rem);  /* @kind other */
  --step-3:  clamp(1.80rem, 1.55rem + 1.00vw, 2.50rem);  /* @kind other */
  --step-4:  clamp(2.20rem, 1.85rem + 1.60vw, 3.40rem);  /* @kind other */
  --step-5:  clamp(2.70rem, 2.10rem + 2.70vw, 4.70rem);  /* @kind other */
  --step-6:  clamp(3.20rem, 2.30rem + 4.60vw, 6.40rem);  /* @kind other */

  /* ---- SPACING (4pt base) ----------------------------------- */
  --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;  --space-10: 128px;

  /* ---- RADII (modest, editorial) ---------------------------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ---- ELEVATION  (minimal, neutral — lean on hairlines) ---- */
  --shadow-xs: 0 1px 2px rgba(26,26,28,0.04);
  --shadow-sm: 0 1px 2px rgba(26,26,28,0.04), 0 1px 3px rgba(26,26,28,0.05);
  --shadow-md: 0 2px 8px rgba(26,26,28,0.06), 0 1px 2px rgba(26,26,28,0.04);
  --shadow-lg: 0 8px 28px rgba(26,26,28,0.08), 0 2px 6px rgba(26,26,28,0.05);
  --ring-accent: 0 0 0 3px var(--carnelian-tint);
  --ring-focus:  0 0 0 3px rgba(63,90,115,0.32);

  --maxw: 1200px;
}

/* =============================================================
   SEMANTIC TYPE — apply directly or copy into product CSS
   ============================================================= */
.ut-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.ut-display {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--step-6);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
}
.ut-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--step-5);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
}
.ut-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--step-4);
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--text);
  text-wrap: balance;
}
.ut-h3 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--step-3);
  line-height: 1.18;
  letter-spacing: 0;
  color: var(--text);
}
.ut-h4 {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--step-2);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--text);
}
.ut-lead {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-secondary);
  text-wrap: pretty;
}
.ut-serif-lead {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-secondary);
  text-wrap: pretty;
}
.ut-body {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--text-secondary);
  text-wrap: pretty;
}
.ut-small {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--text-muted);
}
.ut-mono-label {
  font-family: var(--font-mono);
  font-weight: var(--w-medium);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.ut-code {
  font-family: var(--font-mono);
  font-weight: var(--w-regular);
  font-size: 0.92em;
  background: var(--cloud);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.08em 0.4em;
  color: var(--graphite);
}