/* ── Gustatory Design Tokens ──────────────────────────────────────────
 * Single source of truth for all visual decisions.
 * Reference these vars in all pages — never hardcode values.
 * ─────────────────────────────────────────────────────────────────── */

/* WHY: @font-face with font-display:block ensures zero-FOUT on mobile.
       Block = invisible until font loads (no □□□□), then fast swap.
       Matches display=block in Google Fonts URL (layout.ejs) for consistency. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: local('Cormorant Garamond'), local('CormorantGaramond-Regular');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: block;
  src: local('Cormorant Garamond Italic'), local('CormorantGaramond-Italic');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: local('DM Sans'), local('DMSans-Regular');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: local('DM Sans Medium'), local('DMSans-Medium'), local('DM Sans');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: local('DM Sans SemiBold'), local('DMSans-SemiBold'), local('DM Sans');
}

:root {

  /* ── Palette ──────────────────────────────────────────────────── */
  --bg:             #0a0a0a;  /* deepest background */
  --bg-deep:        #0d0d0d;  /* card/section backgrounds */
  --bg-warm:        #0f0f0e;  /* slightly warm section */
  --bg-card:        #121210;  /* card background */
  --bg-surface:     #161615;  /* elevated surfaces */
  --accent:         #c9a96e;  /* primary gold accent */
  --accent-hover:   #d4b37f;  /* gold hover state */
  --accent-dark:    #8b6914;  /* pressed/active gold */
  --text:           #f2ead8;  /* primary text — NEVER use white */
  --text-muted:     #c9a96e;  /* muted/secondary text */
  --text-dim:       #8b7355;  /* very muted labels */
  --text-disabled:  #5a5040;  /* disabled state */

  /* ── Borders ───────────────────────────────────────────────────── */
  --border:         rgba(201,169,110,0.2);
  --border-hover:   rgba(201,169,110,0.5);
  --border-subtle:  rgba(201,169,110,0.08);

  /* ── Spacing (8px grid) ───────────────────────────────────────── */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;
  --space-3xl:  64px;
  --space-4xl:  80px;

  /* ── Border Radii ─────────────────────────────────────────────── */
  --radius-card:    16px;   /* pairing cards, content cards */
  --radius-button:  8px;    /* action buttons */
  --radius-chip:    4px;    /* small tags, badges */
  --radius-input:   8px;    /* form inputs, selects */
  --radius-lg:      24px;   /* large cards, modals */
  --radius-pill:    100px;  /* pills, toggle chips */

  /* ── Typography ───────────────────────────────────────────────── */
  --font-headline: 'Cormorant Garamond', Georgia, serif;
  --font-body:     'DM Sans', -apple-system, sans-serif;

  --text-h1:   clamp(2rem, 6vw, 3.5rem) / 1.1 var(--font-headline);
  --text-h2:   clamp(1.5rem, 4vw, 2.5rem) / 1.2 var(--font-headline);
  --text-h3:   clamp(1.2rem, 3vw, 1.8rem) / 1.25 var(--font-headline);
  --text-body: 0.95rem / 1.7 var(--font-body);
  --text-sm:   0.85rem / 1.6 var(--font-body);
  --text-xs:   0.72rem / 1.5 var(--font-body);
  --text-label: 0.68rem / 1 var(--font-body);

  /* ── Transitions ──────────────────────────────────────────────── */
  --transition:     200ms ease;
  --transition-fast: 150ms ease;
  --transition-slow: 300ms ease;
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Shadows ──────────────────────────────────────────────────── */
  --shadow-card:    0 8px 32px rgba(0,0,0,0.15);
  --shadow-card-hover: 0 12px 48px rgba(201,169,110,0.16);
  --shadow-button:  0 4px 20px rgba(201,169,110,0.25);

  /* ── Touch targets ─────────────────────────────────────────────── */
  --tap-min:  44px;  /* Apple HIG minimum */
}

/* ══════════════════════════════════════════════════════════════════
   UTILITY CLASSES — Drop these into any EJS template
   ══════════════════════════════════════════════════════════════════ */

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-button);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background var(--transition), transform var(--transition-fast), box-shadow var(--transition);
  min-height: var(--tap-min);
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent);
  color: var(--bg);
  box-shadow: var(--shadow-button);
}
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn-primary:active { transform: scale(0.97); }

.btn-secondary {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--border);
}
.btn-secondary:hover { border-color: var(--border-hover); transform: translateY(-1px); }

.btn-ghost {
  background: rgba(201,169,110,0.08);
  color: var(--text-dim);
  border: 1px solid var(--border-subtle);
}
.btn-ghost:hover { background: rgba(201,169,110,0.12); color: var(--text-muted); }

.btn-danger {
  background: #c0392b;
  color: var(--text);
}
.btn-danger:hover { background: #e74c3c; transform: translateY(-1px); }

.btn-pill {
  border-radius: var(--radius-pill);
  padding: 0.6rem 1.5rem;
}

/* ── Cards ───────────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-card-hover); }

/* ── Form inputs ─────────────────────────────────────────────────── */
.input {
  background: rgba(201,169,110,0.03);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-input);
  padding: 0.75rem 1rem;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.92rem;
  width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
  min-height: var(--tap-min);
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(201,169,110,0.15); outline: none; }
.input::placeholder { color: var(--text-disabled); }

/* ── Chips / badges ──────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-chip);
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 500;
  background: rgba(201,169,110,0.08);
  color: var(--accent);
  border: 1px solid rgba(201,169,110,0.12);
}
.chip-pill { border-radius: var(--radius-pill); }

/* ── Typography helpers ─────────────────────────────────────────── */
.label {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ── Focus ───────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ── WCAG Accessibility Utilities ──────────────────────────────────── */

/* Skip to content — keyboard navigation helper */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--accent);
  color: var(--bg);
  padding: 0.75rem 1.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: 0 0 8px 0;
  z-index: 9999;
  transition: top 0.2s;
  white-space: nowrap;
}
.skip-to-content:focus { top: 0; }

/* Screen reader only — visually hidden, accessible to AT */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reduced motion — WCAG 2.1 SC 2.3.3 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .skeleton {
    animation: none;
    background: rgba(201, 169, 110, 0.06);
  }
}

/* Form validation — WCAG 2.1 SC 3.3.1 */
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: #e74c3c !important;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.18) !important;
}

.form-error-msg {
  font-size: 0.78rem;
  color: #e74c3c;
  margin-top: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-body);
  line-height: 1.4;
}

.form-error-summary {
  background: rgba(231, 76, 60, 0.08);
  border: 1px solid rgba(231, 76, 60, 0.25);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-body);
  color: var(--text);
  font-size: 0.88rem;
}

.form-error-summary h2,
.form-error-summary h3 {
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #e74c3c;
}

.form-error-summary ul { margin: 0.5rem 0 0; padding-left: 1.25rem; }
.form-error-summary li { margin-bottom: 0.25rem; }
.form-error-summary a { color: var(--accent); text-decoration: underline; }

/* Modal dialog base — WCAG 2.1 SC 4.1.2 */
[role="dialog"] {
  max-height: 90vh;
  overflow-y: auto;
}

/* Loading / busy states */
[aria-busy="true"] { cursor: wait; }

/* ── Grain texture (noise overlay) ──────────────────────────────── */
.grain-overlay::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 300px 300px;
}

/* ── Responsive helpers ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .card { padding: 1.25rem; }
}
@media (max-width: 480px) {
  .card { padding: 1rem; }
  .btn { font-size: 0.88rem; padding: 0.7rem 1.25rem; }
}