/* ==========================================================================
   tokens.css — design tokens for School Shows
   --------------------------------------------------------------------------
   The single source of truth for colour, type, spacing, radius and motion.
   Change a value here and it propagates through the whole site.

   Palette concept: "velvet & brass" — a theatre curtain deep red, brass
   fittings, programme-paper background and warm ink. Grounded in the world
   of school stage productions rather than generic e-commerce.
   ========================================================================== */

:root {
  /* ----- Colour ----- */
  --velvet:       #5C1120;  /* curtain red — primary brand */
  --velvet-deep:  #3E0A15;  /* darkest curtain fold — hero / footer */
  --velvet-soft:  #7A2434;  /* hover / secondary velvet */
  --brass:        #B8862B;  /* brass rail — accents, stars, prices */
  --brass-bright: #E3B554;  /* highlighted brass on dark grounds */
  --paper:        #FAF5EA;  /* programme paper — page background */
  --paper-tint:   #F2E9D8;  /* tinted band sections */
  --card:         #FFFDF7;  /* card surface */
  --ink:          #26141A;  /* warm near-black text */
  --ink-soft:     #6B5560;  /* secondary text */
  --line:         #E4D8C4;  /* hairlines and borders */
  --success:      #2E6B45;

  /* ----- Typography ----- */
  --font-display: "Fraunces", "Georgia", serif;
  --font-body:    "Karla", "Helvetica Neue", Arial, sans-serif;

  --text-xs:   0.78rem;
  --text-sm:   0.9rem;
  --text-base: 1.02rem;
  --text-md:   1.18rem;
  --text-lg:   1.45rem;
  --text-xl:   clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem);
  --text-hero: clamp(2.4rem, 1.6rem + 3.6vw, 4.2rem);

  /* ----- Layout ----- */
  --container:  72rem;
  --space-1: 0.375rem;
  --space-2: 0.75rem;
  --space-3: 1.25rem;
  --space-4: 2rem;
  --space-5: 3.25rem;
  --space-6: 5rem;

  /* ----- Shape & depth ----- */
  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 3px rgba(38, 20, 26, 0.08);
  --shadow-md: 0 8px 24px rgba(38, 20, 26, 0.10);
  --shadow-lg: 0 18px 48px rgba(38, 20, 26, 0.16);

  /* ----- Motion ----- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  160ms;
  --dur:       320ms;
  --dur-slow:  650ms;
}