/* =====================================================================
   SCA Coffee Flavor Wheel — Fog Theme
   ===================================================================== */

:root {
  /* ── Surface & Ink ──────────────────────────────────────────── */
  --bg:            #F3F5F2;
  --surface:       #FAFBF9;
  --surface-2:     #FAFBF9;
  --surface-sunk:  #EAEDE8;
  --border:        rgba(30, 33, 30, 0.10);
  --border-strong: rgba(30, 33, 30, 0.18);
  --text:          #1E221E;
  --text-muted:    #7A8878;
  --text-subtle:   #9EAA9A;

  /* ── Brand ──────────────────────────────────────────────────── */
  --accent:        #4E7055;
  --accent-hover:  #3D5C44;
  --accent-soft:   #E0EBE1;
  --accent-ink:    #2A4A30;

  /* ── Elevation ──────────────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(30,33,30,0.04), 0 1px 1px rgba(30,33,30,0.03);
  --shadow-2: 0 2px 6px rgba(30,33,30,0.06), 0 1px 2px rgba(30,33,30,0.04);
  --shadow-3: 0 8px 24px rgba(30,33,30,0.10), 0 2px 6px rgba(30,33,30,0.05);
  --ring:     0 0 0 3px rgba(78, 112, 85, 0.22);

  /* ── Typography — families ──────────────────────────────────── */
  --font:         'Jost', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Cormorant Garamond', Georgia, serif;

  /* ── Typography — size scale (4 steps, px) ──────────────────── */
  --fs-micro: 11px;  /* overline, badges, avatar initials        */
  --fs-xs:    12px;  /* captions, meta, secondary labels         */
  --fs-sm:    13px;  /* secondary body, idle hint, ghost buttons */
  --fs-base:  15px;  /* primary body                             */
  --fs-md:    17px;  /* emphasis, info panel name                */
  --fs-lg:    22px;  /* subheadings                              */
  --fs-xl:    28px;  /* h2 / display                             */

  /* ── Typography — line heights ──────────────────────────────── */
  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-base:  1.55;
  --lh-loose: 1.7;

  /* ── Spacing — 4-pt scale ───────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* ── Radius ─────────────────────────────────────────────────── */
  --r-1:   4px;    /* swatch, thumbnail, tight controls          */
  --r-2:   8px;    /* tooltip, skip link                         */
  --r-3:   12px;   /* info panel card                            */
  --r-4:   16px;   /* prominent cards                            */
  --r-5:   20px;   /* reserved                                   */
  --r-pill:999px;

  /* ── Motion ─────────────────────────────────────────────────── */
  --dur-1: 120ms;  /* micro: hover feedback                      */
  --dur-2: 180ms;  /* standard: color, border transitions        */
  --dur-3: 280ms;  /* relaxed: expand/collapse                   */
  --dur-4: 420ms;  /* deliberate: screen transitions             */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

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

[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  -webkit-font-smoothing: antialiased;
}

/* ── Skip link ──────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--s-4);
  background: var(--accent);
  color: #fff;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-2);
  font-weight: 600;
  text-decoration: none;
  z-index: 9999;
  transition: top var(--dur-1);
}
.skip-link:focus { top: var(--s-4); }

/* ── Header ─────────────────────────────────────────────────────────── */
.site-header {
  width: 100%;
  padding: var(--s-8) var(--s-6) var(--s-3);
  text-align: center;
}
.header-inner {
  max-width: 820px;
  margin: 0 auto;
}
.site-title {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-lg), 3.5vw, var(--fs-xl));
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
}
.site-subtitle {
  margin-top: var(--s-1);
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* ── Forward nav (lower right) ──────────────────────────────────── */
.page-nav-footer {
  width: 100%;
  max-width: 900px;
  display: flex;
  justify-content: flex-end;
  padding: var(--s-2) var(--s-4) var(--s-1);
}
.forward-link {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--dur-2);
}
.forward-link:hover { color: var(--accent); }

/* ── Main ───────────────────────────────────────────────────────────── */
.main-content {
  width: 100%;
  max-width: 900px;
  padding: 0 var(--s-4) var(--s-8);
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}

/* ── Wheel section ──────────────────────────────────────────────────── */
.wheel-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
}

.wheel-container {
  width: 100%;
  max-width: 820px;
  aspect-ratio: 1 / 1;
  position: relative;
}
.wheel-container svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* ── Arc paths ──────────────────────────────────────────────────────── */
.arc-path {
  cursor: pointer;
  transition: filter var(--dur-1) ease, fill-opacity var(--dur-1) ease;
  outline: none;
}
.arc-path:hover,
.arc-path:focus-visible {
  filter: brightness(1.12) saturate(1.1);
}
.arc-path:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#wheel-container [role="button"]:focus { outline: none; }

/* ── Labels ─────────────────────────────────────────────────────────── */
.arc-label {
  pointer-events: none;
  user-select: none;
  dominant-baseline: middle;
  text-anchor: middle;
  font-family: var(--font);
}
.arc-label-inner {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.arc-label-mid  { font-weight: 500; letter-spacing: 0.01em; }
.arc-label-leaf { font-weight: 300; letter-spacing: 0.01em; }

/* ── Center button ──────────────────────────────────────────────────── */
.center-btn { cursor: pointer; }
.center-btn circle { transition: filter var(--dur-1); }
.center-btn:hover circle { filter: brightness(0.96); }
.center-text {
  /* 13.5px intentional: SVG coordinate space, between --fs-xs and --fs-sm */
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 500;
  text-anchor: middle;
  dominant-baseline: middle;
  fill: var(--text);
  letter-spacing: -0.01em;
  pointer-events: none;
}
.center-subtext {
  /* 8.5px intentional: small SVG annotation, no matching scale step */
  font-family: var(--font);
  font-size: 8.5px;
  font-weight: 300;
  text-anchor: middle;
  dominant-baseline: middle;
  fill: var(--text-muted);
  letter-spacing: 0.03em;
  pointer-events: none;
}

/* ── Info panel ─────────────────────────────────────────────────────── */
.info-panel {
  width: 100%;
  max-width: 600px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-3);
  padding: var(--s-3) var(--s-5);
  display: flex;
  align-items: center;
  transition:
    background var(--dur-2) ease,
    border-color var(--dur-2) ease,
    box-shadow var(--dur-2) ease;
}

/* Show card chrome only when a flavor is selected (idle div hidden) */
.info-panel:has(.info-detail:not([hidden])) {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-1);
}

.info-idle {
  width: 100%;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-align: center;
  line-height: var(--lh-loose);
}
.info-detail {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
}
.info-swatch {
  width: var(--s-10);
  height: var(--s-10);
  border-radius: var(--r-1);
  flex-shrink: 0;
  transition: background-color var(--dur-3) ease;
  border: 1px solid var(--border);
}
.info-text { flex: 1; min-width: 0; }
.info-name {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.info-path {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: var(--s-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.site-footer {
  width: 100%;
  padding: var(--s-4) var(--s-6);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  line-height: var(--lh-loose);
}
.site-footer a { color: var(--accent); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .site-header  { padding: var(--s-5) var(--s-3) var(--s-2); }
  .main-content { padding: 0 var(--s-2) var(--s-6); gap: var(--s-2); }
  .info-panel   { padding: var(--s-2) var(--s-3); }
  .info-swatch  { width: var(--s-8); height: var(--s-8); }
  .info-name    { font-size: var(--fs-base); }
}

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .arc-path { transition: none; }
}