/* Opera Cafe — design tokens
   Palette sampled from the existing gold Radcliffe Camera mark (#D4A800).
   Gold is decorative/large-type only; ink and deep-gold carry all body text. */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Karla:wght@300;400;500;600;700&display=swap');

:root {
  /* --- brand --- */
  --gold:            #D4A800;  /* the mark. Large type, rules, fills. Never body text. */
  --gold-deep:       #7B6100;  /* gold-flavoured text that clears AA on every ground
                                  we use: 5.5:1 cream, 5.0:1 cream-deep, 5.9:1 white */
  --gold-soft:       #F0E2B4;  /* hairlines, hover washes */
  --ink:             #1C1206;  /* body text, 15:1 on cream */
  --ink-muted:       #6B5A45;  /* captions, 5.4:1 on cream */
  --cream:           #FBF7EF;  /* page canvas */
  --cream-deep:      #F3EADA;  /* alternating sections, cards */
  --white:           #FFFFFF;
  --scrim:           rgba(20, 13, 4, .58);  /* over photography */

  /* --- dark stage: the landing, and any full-bleed photographic section.
         Gold reaches 8.6:1 on this ground, so it can carry text here. --- */
  --stage:           #0E0A04;
  --stage-raised:    #1A1208;
  --on-stage:        #F6F0E2;
  --on-stage-muted:  #B8AA90;  /* 7.4:1 on stage */

  /* --- semantic --- */
  --bg:              var(--cream);
  --bg-raised:       var(--white);
  --fg:              var(--ink);
  --fg-muted:        var(--ink-muted);
  --border:          #E4D8C2;
  --border-strong:   var(--gold);
  --accent:          var(--gold);
  --on-accent:       var(--ink);        /* 8.3:1 on gold */
  --link:            var(--gold-deep);
  --ring:            var(--gold-deep);
  --danger:          #A32020;
  --success:         #2F6B30;

  /* --- type --- */
  --font-display: 'EB Garamond', 'Times New Roman', Georgia, serif;  /* matches the wordmark */
  --font-ui:      'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs:   .8125rem;  /* 13px — labels only */
  --text-sm:   .9375rem;  /* 15px */
  --text-base: 1rem;      /* 16px floor */
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  clamp(2.5rem, 5vw, 4rem);
  --text-5xl:  clamp(3rem, 8vw, 6rem);

  --leading-tight: 1.15;
  --leading-body:  1.6;
  --tracking-caps: .18em;   /* small-caps labels, as on the printed menus */

  /* --- space (4px base) --- */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-6: 1.5rem;  --s-8: 2rem;    --s-12: 3rem;   --s-16: 4rem;
  --s-24: 6rem;   --s-32: 8rem;

  --container: 1180px;
  --measure: 68ch;

  /* --- shape & depth --- */
  --radius-sm: 2px;
  --radius:    4px;         /* print-inspired: nearly square */
  --radius-lg: 8px;
  --shadow-sm: 0 1px 2px rgba(28,18,6,.06);
  --shadow:    0 4px 16px rgba(28,18,6,.10);
  --shadow-lg: 0 18px 48px rgba(28,18,6,.18);

  /* --- motion --- */
  --dur:      220ms;
  --dur-slow: 420ms;
  --ease:     cubic-bezier(.22,.61,.36,1);

  /* --- controls --- */
  --tap: 44px;   /* minimum touch target, everywhere */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- primitives ---------- */

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: .01em;
  margin: 0;
}

/* Small-caps rule label — the signature device lifted from the printed menus */
.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--gold-deep);
}

.rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--s-6) 0;
}
.rule--gold { border-top-color: var(--gold); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

a { color: var(--link); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: 0 var(--s-6);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn--primary { background: var(--gold); color: var(--on-accent); }
.btn--primary:hover { background: #C09800; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--gold-soft); }
.btn--onDark { background: transparent; color: var(--white); border-color: rgba(255,255,255,.7); }
.btn--onDark:hover { background: var(--white); color: var(--ink); }

/* Forms — visible labels, error beside the field (never a top-of-page summary) */
/* align-content:start stops an input stretching to match a taller sibling column
   when two fields sit side by side and only one carries a hint */
.field { display: grid; align-content: start; gap: var(--s-2); margin-bottom: var(--s-6); }
.field > label { font-size: var(--text-sm); font-weight: 600; }
.field > .hint { font-size: var(--text-sm); color: var(--fg-muted); }
.field > .error { font-size: var(--text-sm); color: var(--danger); }
.field :is(input, select, textarea) {
  min-height: var(--tap);
  padding: var(--s-3);
  font: inherit;
  color: var(--fg);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.field :is(input, select, textarea):focus { border-color: var(--gold-deep); }
.field textarea { min-height: 10rem; resize: vertical; }