/* ============================================================
   Norwalk City Directory — Colors & Type
   ============================================================
   Foundation tokens for the design system.
   Use CSS custom properties; semantic element styles at bottom.
*/

/* ---- Fonts (Google Fonts substitutions; see README) ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---- Core palette (sampled from Visit Norwalk wordmark) ---- */
  --sky:      #189AD6;  /* primary blue — hero, "Visit" script */
  --magenta:  #B42473;  /* accent — arts, events, featured */
  --teal:     #43C1BB;  /* water, waterfront, transit */
  --red:      #EF483E;  /* civic, alerts, eats */
  --yellow:   #FEC52E;  /* food, markets, daytime */
  --pink:     #F499BA;  /* people, neighborhoods */
  --green:    #A1CF5F;  /* parks, outdoors, schools */
  --black:    #1A1A1A;
  --white:    #FFFFFF;
  --off-white:#F7F7F5;
  --cream:    #FFFBF2;

  /* Tints for surfaces (soft washes) */
  --sky-tint:     #D9EEF8;
  --magenta-tint: #F2D5E4;
  --teal-tint:    #D4F0EE;
  --red-tint:     #FCDAD7;
  --yellow-tint:  #FFF2C8;
  --pink-tint:    #FDE4ED;
  --green-tint:   #E6F2D3;

  /* ---- Semantic color roles ---- */
  --page-bg:    var(--white);
  --surface:    #FFFFFF;
  --surface-warm: var(--cream);
  --fg-1:       var(--black);
  --fg-2:       #3A3A3A;
  --fg-3:       #6B6B6B;
  --fg-muted:   #9A9A95;
  --rule:       #1A1A1A;
  --rule-soft:  #E0DED8;

  /* Back-compat aliases (older previews used these names) */
  --bold:  var(--red);
  --rise:  var(--yellow);
  --calm:  var(--sky);
  --flow:  var(--green);
  --roam:  var(--pink);
  --peach: var(--yellow-tint);

  /* ---- Type stacks ---- */
  --font-display: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-ui:      'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-serif:   'Source Serif 4', 'Charter', 'Iowan Old Style', Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  /* ---- Type scale ---- */
  --fs-caption:  12px;
  --fs-label:    13px;
  --fs-body:     16px;
  --fs-body-lg:  18px;
  --fs-h6:       16px;
  --fs-h5:       20px;
  --fs-h4:       24px;
  --fs-h3:       32px;
  --fs-h2:       44px;
  --fs-h1:       64px;
  --fs-display:  96px;
  --fs-mega:     144px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-body:    1.5;
  --lh-long:    1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-caps:   0.08em;
  --tracking-label:  0.06em;

  /* ---- Spacing (8px grid) ---- */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ---- Radii ---- */
  --r-0:    0;
  --r-1:    2px;
  --r-2:    4px;
  --r-pill: 999px;

  /* ---- Borders ---- */
  --bw-hair: 1px;
  --bw-1:    2px;
  --bw-bar:  8px;
  --bw-bar-lg: 16px;

  /* ---- Shadows (hard-offset letterpress style) ---- */
  --shadow-0: none;
  --shadow-press-sm: 2px 2px 0 var(--black);
  --shadow-press:    4px 4px 0 var(--black);
  --shadow-press-lg: 8px 8px 0 var(--black);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(.2,.8,.2,1);
  --ease-linear:   linear;
  --t-fast:  120ms;
  --t-med:   180ms;
  --t-slow:  260ms;

  /* ---- Layout widths ---- */
  --w-read:   640px;
  --w-list:   960px;
  --w-page:   1200px;
}

/* ============================================================
   Semantic element styles
   ============================================================ */

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--fg-1);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

/* Display / Headings — Helvetica-feel, tight tracking */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--s-4);
  color: var(--fg-1);
}
h1, .h1 { font-size: var(--fs-h1); font-weight: 900; }
h2, .h2 { font-size: var(--fs-h2); font-weight: 800; }
h3, .h3 { font-size: var(--fs-h3); font-weight: 700; }
h4, .h4 { font-size: var(--fs-h4); font-weight: 700; }
h5, .h5 { font-size: var(--fs-h5); font-weight: 700; letter-spacing: 0; }
h6, .h6 { font-size: var(--fs-h6); font-weight: 600; letter-spacing: 0; }

.display { font-family: var(--font-display); font-size: var(--fs-display); font-weight: 900; line-height: 0.95; letter-spacing: -0.03em; }
.mega    { font-family: var(--font-display); font-size: var(--fs-mega);    font-weight: 900; line-height: 0.9;  letter-spacing: -0.04em; }

/* Body */
p { margin: 0 0 var(--s-4); line-height: var(--lh-body); }
.lead { font-size: var(--fs-body-lg); line-height: var(--lh-long); }

/* Serif editorial body */
.prose, .prose p {
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-long);
  color: var(--fg-1);
  font-feature-settings: "onum", "kern";
}
.prose p + p { margin-top: var(--s-4); }
/* Opt-in first-line indent for print/editorial contexts only. */
.prose--indent p + p { text-indent: 1.2em; }
.prose--indent p:first-of-type { text-indent: 0; }

/* Labels / Eyebrow — ALL CAPS, tracked */
.label, .eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-1);
}
.caption {
  font-size: var(--fs-caption);
  color: var(--fg-3);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: 600;
}

/* Mono — tabular / listings */
code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-variant-numeric: tabular-nums;
}

/* Links */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease-standard);
}
a:hover { color: var(--sky); }

/* Rules */
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-6) 0; }
.rule-hair { border-top: 1px solid var(--rule); }
.rule-bar  { border-top: var(--bw-bar) solid var(--black); }

/* Utility */
.bar {
  display: block;
  height: var(--bw-bar);
  background: var(--black);
}
.bar-lg { height: var(--bw-bar-lg); }

.noise-overlay {
  position: relative;
}
.noise-overlay::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
  mix-blend-mode: multiply;
  opacity: 0.06;
  pointer-events: none;
}

/* Number features */
.tabular { font-variant-numeric: tabular-nums lining-nums; }
.oldstyle { font-variant-numeric: oldstyle-nums proportional-nums; }

/* Selection */
::selection { background: var(--yellow); color: var(--black); }