/* ==========================================================================
   Motherland Tickets: base.css
   Shared by the public site and the admin. Fonts, tokens, reset, primitives.
   Palette comes from the festival's own banner (plum, red, yellow, lime).
   ========================================================================== */

/* Figtree (SIL OFL), self-hosted. Variable weight 400-900.
   Figtree has no naira sign, so a tiny fallback file supplies U+20A6 under the same family name. */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url("../fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-201D, U+2022, U+2026, U+2122, U+2212;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url("../fonts/naira-fallback.woff2") format("woff2");
  unicode-range: U+20A6;
}

:root {
  /* Brand */
  --plum:        #5a2a63;
  --plum-deep:   #3c1a45;
  --aubergine:   #22102a;
  --red:         #c8202b;
  --red-deep:    #a5151f;
  --sun:         #f7c81e;
  --sun-deep:    #e5b508;
  --lime:        #8dc63f;

  /* Surfaces and lines */
  --paper:       #f6f2f8;
  --card:        #ffffff;
  --tint:        #efe8f3;
  --line:        rgba(34, 16, 42, .14);
  --line-soft:   rgba(34, 16, 42, .08);

  /* Text */
  --ink:         #22102a;
  --ink-2:       #4a3d52;
  --muted:       #6b5e72;
  --on-dark:     #f6f2f8;
  --on-dark-2:   rgba(246, 242, 248, .72);

  /* States */
  --ok:          #1d7a3e;
  --ok-bg:       #e6f4ea;
  --ok-line:     #a9d6b8;
  --warn:        #85560a;
  --warn-bg:     #fff3d1;
  --warn-line:   #ecd08a;
  --bad:         #b3121c;
  --bad-bg:      #fdecea;
  --bad-line:    #f1b4ad;
  --focus:       #8b3d9b;

  /* Type */
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-md: 1.25rem;
  --fs-lg: 1.5625rem;
  --fs-xl: clamp(1.75rem, 4vw, 2.25rem);

  /* Shape */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* Numbers line up in prices and tables */
.num, .price { font-variant-numeric: tabular-nums lining-nums; }

/* Display type: the banner's wide, heavy lettering */
.display {
  font-weight: 900;
  text-transform: uppercase;
  line-height: .95;
  letter-spacing: -.005em;
}

/* Keyboard focus is always visible */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-dark :focus-visible { outline-color: var(--sun); }

.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;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  background: var(--sun); color: var(--aubergine);
  padding: 10px 16px; border-radius: var(--r-md); font-weight: 700;
  transition: top .15s var(--ease);
}
.skip-link:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}