/* ============================================================
   RESTAURANT DE LA HAUTE VILLE — Foundations
   Colors + Type tokens. Import this file everywhere.
   "L'exigence gastronomique, l'esprit bistrot."
   ============================================================ */

/* ---- Webfonts (Google Fonts — see README for substitution notes) ---- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500;600&display=swap');

/* ---- Brand wordmark (self-hosted, supplied by the client) ---- */
@font-face {
  font-family: 'Brush ATF';
  src: url('fonts/BrushATF.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------------------------------------------------------
     COLOR — Ink (warm charcoal, drawn from the logo line-art)
     --------------------------------------------------------- */
  --ink-900: #221C18;   /* near-black, warm */
  --ink-800: #2B2420;   /* primary text / line art */
  --ink-700: #3D352E;
  --ink-500: #5C5247;   /* secondary text */
  --ink-300: #8A7E70;   /* muted / captions */
  --ink-200: #B5AA99;   /* disabled, hairlines on dark */

  /* ---------------------------------------------------------
     COLOR — Parchment (paper / surfaces)
     --------------------------------------------------------- */
  --paper:    #FAF5EA;  /* lightest — page background */
  --cream:    #F4ECDD;  /* default surface (matches logo ivory) */
  --sand:     #EADFC8;  /* raised / alternating surface */
  --sand-deep:#DECFB0;  /* hairline borders on light */

  /* ---------------------------------------------------------
     COLOR — Bordeaux (primary accent — the wine cellar)
     --------------------------------------------------------- */
  --bordeaux-700: #5C141D;  /* hover / pressed */
  --bordeaux-600: #7A1F2B;  /* primary accent */
  --bordeaux-400: #9A4250;  /* lighter, links on light */
  --bordeaux-100: #E7D2D2;  /* tint surfaces */

  /* ---------------------------------------------------------
     COLOR — Brass (secondary accent — gastronomic refinement)
     --------------------------------------------------------- */
  --brass-700: #806329;
  --brass-600: #A8853F;  /* secondary accent / rules */
  --brass-400: #C6A867;  /* gilt highlight */
  --brass-100: #EBDFC4;

  /* ---------------------------------------------------------
     COLOR — Sea-slate (tertiary — Côte d'Opale)
     --------------------------------------------------------- */
  --slate-700: #2C3B41;
  --slate-600: #3C5159;  /* tertiary accent */
  --slate-300: #7C9097;

  /* ---------------------------------------------------------
     SEMANTIC COLOR
     --------------------------------------------------------- */
  --bg:            var(--paper);
  --bg-surface:    var(--cream);
  --bg-raised:     var(--sand);
  --bg-inverse:    var(--ink-800);

  --fg:            var(--ink-800);
  --fg-muted:      var(--ink-500);
  --fg-subtle:     var(--ink-300);
  --fg-on-dark:    var(--cream);
  --fg-on-dark-muted: #C9BCA6;

  --accent:        var(--bordeaux-600);
  --accent-hover:  var(--bordeaux-700);
  --gilt:          var(--brass-600);

  --line:          var(--sand-deep);
  --line-strong:   var(--ink-200);
  --line-gilt:     var(--brass-400);

  --price:         var(--ink-700);

  /* ---------------------------------------------------------
     TYPE — families
     --------------------------------------------------------- */
  /* Brand wordmark is set in BRUSH ATF (self-hosted, client-supplied). */
  --font-script:  'Brush ATF', 'Brush Script MT', cursive;
  --font-display: 'Cormorant Garamond', 'Hoefler Text', Georgia, serif; /* headings */
  --font-body:    'EB Garamond', Georgia, 'Times New Roman', serif;     /* running text */
  --font-label:   'Jost', 'Futura', 'Century Gothic', sans-serif;       /* caps labels / UI */

  /* ---------------------------------------------------------
     TYPE — fluid display scale (menu-card energy)
     --------------------------------------------------------- */
  --step--1: 0.86rem;   /* fine print */
  --step-0:  1.0625rem; /* body 17px */
  --step-1:  1.375rem;
  --step-2:  1.75rem;
  --step-3:  2.25rem;
  --step-4:  3rem;
  --step-5:  4rem;
  --step-6:  5.5rem;

  /* tracking */
  --track-label: 0.22em;  /* caps section labels */
  --track-eyebrow: 0.34em;

  /* ---------------------------------------------------------
     SPACING (8px base, classic rhythm)
     --------------------------------------------------------- */
  --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;
  --sp-10: 128px;

  /* ---------------------------------------------------------
     RADII — restrained, mostly square with soft touch
     --------------------------------------------------------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-pill: 999px;

  /* ---------------------------------------------------------
     SHADOW — soft, warm, low-contrast (printed-paper feel)
     --------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(34,28,24,0.06);
  --shadow-md: 0 6px 20px -8px rgba(34,28,24,0.18);
  --shadow-lg: 0 24px 60px -24px rgba(34,28,24,0.34);
  --shadow-gilt: 0 0 0 1px var(--brass-400), 0 10px 30px -14px rgba(34,28,24,0.30);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES (opt-in via .rhv-prose or use vars)
   ============================================================ */
.rhv-prose {
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
}

.rhv-eyebrow {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--gilt);
}

.rhv-label {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.rhv-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-5);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.rhv-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-4);
  line-height: 1.08;
  color: var(--fg);
}
.rhv-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-3);
  line-height: 1.14;
  color: var(--fg);
}
.rhv-section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}
.rhv-script {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: var(--step-4);
  line-height: 1;
  color: var(--fg);
}
.rhv-lead {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: var(--step-2);
  line-height: 1.4;
  color: var(--fg-muted);
}
.rhv-body { font-family: var(--font-body); font-size: var(--step-0); line-height: 1.6; color: var(--fg); }
.rhv-fine { font-family: var(--font-label); font-weight: 300; font-size: var(--step--1); letter-spacing: 0.04em; color: var(--fg-subtle); }
.rhv-price { font-family: var(--font-body); font-weight: 500; font-size: var(--step-0); color: var(--price); font-variant-numeric: lining-nums; }