/* ==========================================================================
   MapleBird — tokens.css
   Theme: maple-light. Single source of truth for colour, type, space.

   Two golds, deliberately:
     --color-accent-fill  #FFD700  brand gold. BACKGROUNDS ONLY (buttons,
                                   badges, chart cells) always with dark text.
     --color-accent       #7A5C00  the same hue darkened until it is legible.
                                   Every gold TEXT, link, icon and rule.

   #FFD700 on white is 1.4:1 — it fails AA even at display sizes — so gold text
   never uses the fill value. Measured ratios against #FFFFFF:
     accent      #7A5C00  6.25:1   accent-dim  #6B5000  7.57:1
     text        #16160F 18.17:1   secondary   #56564D  7.41:1
     ink on fill #16160F 12.95:1
   ========================================================================== */

:root {
  --color-bg:#FFFFFF; --color-surface:#F6F6F2; --color-surface-2:#EDEDE6;
  --color-accent:#7A5C00; --color-accent-fill:#FFD700; --color-accent-dim:#6B5000;
  --color-text-primary:#16160F; --color-text-secondary:#56564D; --color-text-muted:#8A8A80;
  --color-border:#DDDDD4; --color-error:#B3151F; --color-success:#0F7A3D;

  --font-display:'Rajdhani','Bebas Neue',sans-serif;
  --font-body:'Inter','DM Sans',sans-serif;

  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem;
  --text-xl:1.25rem; --text-2xl:1.5rem; --text-3xl:1.875rem; --text-4xl:2.25rem; --text-5xl:3rem;
  --line-height-tight:1.2; --line-height-normal:1.5; --line-height-loose:1.75;

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem;
  --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem;
  --space-16:4rem; --space-20:5rem;

  --radius-sm:4px; --radius-md:8px; --radius-lg:16px; --radius-xl:24px; --radius-full:9999px;
  --shadow-card:0 1px 2px rgba(22,22,15,.06), 0 6px 18px rgba(22,22,15,.06);
  --shadow-glow:0 2px 10px rgba(122,92,0,.16);
  --shadow-glow-strong:0 6px 22px rgba(122,92,0,.26);
  --z-base:0; --z-raised:10; --z-nav:100; --z-modal:200; --z-toast:300;
  --transition-fast:150ms ease; --transition-normal:250ms ease; --transition-slow:400ms ease;
  --container-max:1200px; --container-pad:var(--space-4);
}
@media (min-width:768px){ :root{ --container-pad:var(--space-8); } }

/* --------------------------------------------------------------------------
   Derived tokens — kept separate so the block above stays the canonical spec.
   -------------------------------------------------------------------------- */

:root {
  /* Translucent gold for hover washes and hairlines. Never for text. */
  --color-accent-wash: rgba(255, 215, 0, 0.20);
  --color-accent-line: rgba(122, 92, 0, 0.32);
  /* Modal scrim and the translucent sticky nav */
  --color-scrim: rgba(22, 22, 15, 0.45);
  --color-nav-bg: rgba(255, 255, 255, 0.88);
  --nav-height: 3.75rem;
}

@media (min-width: 768px) {
  :root {
    --nav-height: 4.5rem;
  }
}

/* --------------------------------------------------------------------------
   Accessibility primitives — required on every page.
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-2);
  z-index: var(--z-toast);
  transform: translateY(-200%);
  padding: var(--space-3) var(--space-5);
  background: var(--color-accent-fill);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-fast);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Only suppress the ring for pointer users who did not tab here. */
:focus:not(:focus-visible) {
  outline: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-normal: 0ms;
    --transition-slow: 0ms;
  }
}