/* 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.

   SOURCE OF TRUTH for this file and the /fonts directory next to it —
   netto-bar-webshop keeps a synced copy of both. Edit here first, then
   copy this file and any font changes across to the webshop repo. */

/* 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); }