/* ─────────────────────────────────────────────────────────────
   DESIGN TOKENS — Gallery Map
   Single source of truth for all design decisions
───────────────────────────────────────────────────────────── */

:root {

  /* ── Colour ──────────────────────────────────────── */
  --c-black:       #0a0a0a;
  --c-white:       #ffffff;
  --c-bg:          #fafafa;
  --c-surface:     #f4f4f4;
  --c-border:      #e2e2e2;
  --c-border-mid:  #c4c4c4;
  --c-muted:       #9a9a9a;
  --c-subtle:      #636363;
  --c-body:        #2e2e2e;

  /* Warning — backed by SDS yellow scale */
  --c-warning-bg:     var(--sds-color-yellow-100);  /* #fffbeb */
  --c-warning-border: var(--sds-color-yellow-300);  /* #ffe8a3 */
  --c-warning-text:   var(--sds-color-yellow-800);  /* #682d03 */

  /* ── Typography ──────────────────────────────────── */
  --font-serif: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-sans:  'Inter', 'Helvetica Neue', Arial, sans-serif;

  --fw-heading: 500; /* large titles, gallery names, h2s */
  --fw-ui:      500; /* buttons, wordmark, labels        */
  --fw-body:    300; /* body paragraphs, descriptions    */

  /* ── Type Scale ──────────────────────────────────── */
  --text-11: 0.6875rem;
  --text-12: 0.75rem;
  --text-13: 0.8125rem;
  --text-14: 0.875rem;
  --text-16: 1rem;
  --text-18: 1.125rem;
  --text-22: 1.375rem;
  --text-28: 1.75rem;
  --text-36: 2.25rem;
  --text-48: 3rem;
  --text-64: 4rem;

  /* ── Spacing ─────────────────────────────────────── */
  --sp-4:  0.25rem;
  --sp-6:  0.375rem;
  --sp-8:  0.5rem;
  --sp-10: 0.625rem;
  --sp-12: 0.75rem;
  --sp-14: 0.875rem;
  --sp-16: 1rem;
  --sp-20: 1.25rem;
  --sp-24: 1.5rem;
  --sp-32: 2rem;
  --sp-40: 2.5rem;
  --sp-48: 3rem;
  --sp-64: 4rem;
  --sp-80: 5rem;

  /* ── Radius ──────────────────────────────────────── */
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   1rem;
  --r-pill: 999px;

  /* ── Transitions ─────────────────────────────────── */
  --t-fast:   140ms ease;
  --t-base:   240ms ease;
  --t-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-spring: 520ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Shadows ─────────────────────────────────────── */
  --shadow-xs: 0 1px 3px rgba(0,0,0,0.05);
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.11);
  --shadow-lg: 0 8px 48px rgba(0,0,0,0.16);

  /* ── Layout ──────────────────────────────────────── */
  --header-h:  56px;
  --max-w:     740px;

  /* ── Z-index ─────────────────────────────────────── */
  --z-map:     0;
  --z-overlay: 10;
  --z-panel:   20;
  --z-header:  30;
  --z-menu:    40;
  --z-top:     50;
}