/* ============================================================
   BRAND TOKENS — The Moxie Centre for Art
   Mirrors ../../../website/static/css/tokens.css — change both
   in lock-step, or extract to a shared package later.
   ============================================================ */

:root {
  /* ---------- Colour ---------- */
  --color-dark-gray: #454849;
  --color-orange:    #DD5F24;
  --color-dark-red:  #8E2201;
  --color-white:     #FFFFFF;
  --color-warm-gray: #F2F0ED;
  --color-off-black: #1A1A1A;

  /* Semantic roles derived from the palette.
     Orange fails WCAG AA for small text on white (3.3:1), so links use
     dark gray (underlined) or dark red (7.5:1). Buttons use white text
     on orange which passes. */
  --bg-page:          var(--color-warm-gray);
  --bg-surface:       var(--color-white);
  --bg-inverse:       var(--color-off-black);
  --text-default:     var(--color-dark-gray);
  --text-muted:       color-mix(in srgb, var(--color-dark-gray) 70%, white);
  --text-inverse:     var(--color-white);
  --link:             var(--color-dark-gray);
  --link-hover:       var(--color-dark-red);
  --accent-event:     var(--color-orange);
  --accent-exhibition:var(--color-dark-red);
  --button-bg:        var(--color-orange);
  --button-text:      var(--color-white);
  --border-soft:      color-mix(in srgb, var(--color-dark-gray) 15%, transparent);

  /* ---------- Typography ---------- */
  --font-sans:   "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-accent: "Playfair Display", Georgia, "Times New Roman", serif;

  --fs-base:  1rem;
  --fs-sm:    0.875rem;
  --fs-lg:    1.125rem;
  --fs-xl:    1.5rem;
  --fs-2xl:   2rem;
  --fs-3xl:   2.75rem;
  --fs-4xl:   4rem;

  --lh-tight:  1.15;
  --lh-normal: 1.55;

  /* ---------- Spacing ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* ---------- Layout ---------- */
  --radius-sm: 2px;
  --radius-md: 4px;

  /* ---------- Motion ---------- */
  --dur: 160ms;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}