/* Netto Bar Design System — Colors & Type
   Vintage bar in Curaçao, est. 1954. Known for Green Rum (Ròm Bèrdè).
   Palette + motifs inspired by the bar's ornate floor tiles.

   SYNCED FROM netto-bar-landing-page/colors_and_type.css — that repo is
   the source of truth for this file and the /fonts directory next to it.
   Don't hand-edit this copy; make the change in the landing repo and copy
   both across. (Two live repos still beats one merged repo with mixed
   concerns, but it does mean this file needs to be kept identical by hand
   until/unless the two sites are consolidated.) */

/* Inter + JetBrains Mono — self-hosted (previously loaded via Google Fonts
   @import). Subsetted to the Latin-1 range only (U+0000–00FF plus a small
   set of punctuation/currency marks) since every character used across
   both sites — including the Papiamentu diacritics in "Ròm Bèrdè" and
   "Curaçao" — falls within it. */
@font-face { font-family: 'Inter'; font-weight: 300; font-style: normal;
  src: url('fonts/Inter-latin.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal;
  src: url('fonts/Inter-latin.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal;
  src: url('fonts/Inter-latin.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal;
  src: url('fonts/Inter-latin.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal;
  src: url('fonts/Inter-latin.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-style: normal;
  src: url('fonts/JetBrainsMono-latin.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-style: normal;
  src: url('fonts/JetBrainsMono-latin.woff2') format('woff2'); font-display: swap; }

/* Nyght Serif — self-hosted brand font, all 10 weights */
@font-face { font-family: 'Nyght Serif'; font-weight: 300; font-style: normal;
  src: url('fonts/NyghtSerif-Light.woff2') format('woff2'), url('fonts/NyghtSerif-Light.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Nyght Serif'; font-weight: 300; font-style: italic;
  src: url('fonts/NyghtSerif-LightItalic.woff2') format('woff2'), url('fonts/NyghtSerif-LightItalic.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Nyght Serif'; font-weight: 400; font-style: normal;
  src: url('fonts/NyghtSerif-Regular.woff2') format('woff2'), url('fonts/NyghtSerif-Regular.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Nyght Serif'; font-weight: 400; font-style: italic;
  src: url('fonts/NyghtSerif-RegularItalic.woff2') format('woff2'), url('fonts/NyghtSerif-RegularItalic.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Nyght Serif'; font-weight: 500; font-style: normal;
  src: url('fonts/NyghtSerif-Medium.woff2') format('woff2'), url('fonts/NyghtSerif-Medium.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Nyght Serif'; font-weight: 500; font-style: italic;
  src: url('fonts/NyghtSerif-MediumItalic.woff2') format('woff2'), url('fonts/NyghtSerif-MediumItalic.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Nyght Serif'; font-weight: 700; font-style: normal;
  src: url('fonts/NyghtSerif-Bold.woff2') format('woff2'), url('fonts/NyghtSerif-Bold.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Nyght Serif'; font-weight: 700; font-style: italic;
  src: url('fonts/NyghtSerif-BoldItalic.woff2') format('woff2'), url('fonts/NyghtSerif-BoldItalic.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Nyght Serif'; font-weight: 800; font-style: normal;
  src: url('fonts/NyghtSerif-Dark.woff2') format('woff2'), url('fonts/NyghtSerif-Dark.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Nyght Serif'; font-weight: 800; font-style: italic;
  src: url('fonts/NyghtSerif-DarkItalic.woff2') format('woff2'), url('fonts/NyghtSerif-DarkItalic.otf') format('opentype'); font-display: swap; }

:root {
  /* ---- Core brand palette (from Pantone chips in the stylescape) ---- */
  --nb-olive:        #414222;  /* PANTONE 5747  — primary dark, military green */
  --nb-black:        #0B0B09;  /* PANTONE Black — near-black, warmed toward olive */
  --nb-oxblood:      #5E130C;  /* PANTONE 188   — deep red accent */
  --nb-tobacco:      #9E6719;  /* PANTONE 146   — mustard / brown */
  --nb-sand:         #CAA873;  /* PANTONE 466   — tan / tile-grout beige */
  --nb-orange:       #F16022;  /* PANTONE 021   — vivid accent, spark/heat */

  /* ---- Hover shades (darkened ~25%, derived once, kept as tokens
         so components don't hardcode their own) ---- */
  --nb-olive-hover:   #2f3019;
  --nb-tobacco-hover: #855415;

  /* ---- Off-brand neutrals (tuned to sit with the palette) ---- */
  --nb-cream:        #F4ECD8;  /* paper / page background */
  --nb-cream-2:      #EADFC2;  /* secondary paper */
  --nb-ink:          #1A1A12;  /* body text on cream */
  --nb-ink-2:        #3A3A28;  /* secondary text */
  --nb-ink-3:        #6A6A50;  /* muted text */
  --nb-rule:         rgba(26, 26, 18, 0.18); /* hairline rules */

  /* Signature "Green Rum" — the drink that made the bar famous */
  --nb-rom-berde:    #3F7A2E;  /* Ròm Bèrdè — vivid bottle green */
  --nb-rom-berde-2:  #6CA854;

  /* ---- Semantic foreground / background ---- */
  --fg-1: var(--nb-ink);
  --fg-2: var(--nb-ink-2);
  --fg-3: var(--nb-ink-3);
  --fg-inv: var(--nb-cream);

  --bg-1: var(--nb-cream);
  --bg-2: var(--nb-cream-2);
  --bg-dark: var(--nb-olive);
  --bg-deep: var(--nb-black);

  --accent:       var(--nb-oxblood);
  --accent-warm:  var(--nb-orange);
  --accent-gold:  var(--nb-tobacco);

  /* ---- Type stack ---- */
  --font-serif: 'Nyght Serif', 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:  'JetBrains Mono', 'Menlo', monospace;

  /* ---- Type scale (editorial, not tech) ---- */
  --fs-hero:    clamp(64px, 9vw, 148px);  /* display "Netto bar" wordmark */
  --fs-h1:      56px;
  --fs-h2:      40px;
  --fs-h3:      28px;
  --fs-h4:      20px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-tiny:    12px;
  --fs-micro:   10px;  /* used for wide-tracked "SINCE 1954" caps */

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-body:    1.55;
  --lh-loose:   1.75;

  --tracking-wide:  0.18em;
  --tracking-caps:  0.32em;  /* "S  I  N  C  E   1  9  5  4" */
  --tracking-tight: -0.015em;

  /* ---- Spacing (4pt grid) ---- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;

  /* ---- Radii — minimal. The brand is rectilinear/tile-based ---- */
  --r-0:   0px;
  --r-1:   2px;    /* subtle softening on inputs */
  --r-2:   4px;    /* buttons */
  --r-pill: 999px; /* chips / tags */

  /* ---- Borders ---- */
  --border-hair:   1px solid var(--nb-rule);
  --border-ink:    1px solid var(--nb-ink);
  --border-olive:  1px solid var(--nb-olive);
  --border-double: 3px double var(--nb-ink);  /* classic menu divider */

  /* ---- Shadows — muted, paper-like, never slick ---- */
  --shadow-paper: 0 1px 0 rgba(26, 26, 18, 0.06), 0 2px 10px rgba(26, 26, 18, 0.08);
  --shadow-card:  0 2px 4px rgba(26, 26, 18, 0.08), 0 12px 28px rgba(26, 26, 18, 0.12);
  --shadow-press: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* ===== Base typography ===== */

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

h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--sp-4);
}

h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-4);
}

h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-3);
}

h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-2);
}

p {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}

a {
  color: var(--nb-oxblood);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--nb-orange); }