/* Cheshire Saxophone Quartet — design tokens.

   Copied from the Cheshire Saxophone Quartet Design System, concatenated into one file
   so the browser makes one request instead of chasing seven @imports before it can
   paint. Each block below is verbatim from the design system's tokens/<name>.css —
   when the design system changes, re-paste the block, do not edit values here.

   The webfont request itself lives in index.html as a <link>, so it can start
   downloading at the same time as this file rather than after it. */

/* ======================= tokens/fonts.css ======================= */

/* Cheshire Saxophone Quartet — font tokens.
   From the design system (_ds/.../tokens/fonts.css).

   The design system's @import pulls all six families because it also carries the
   Midnight Sketchbook voice. This site is entirely in the elegant concert-programme
   voice, so only Playfair Display, EB Garamond and Lato are fetched. The sketchbook
   variables stay defined — swap the @import if a sketchbook page is ever added.

   These are Google Fonts nearest-matches; no original binaries were supplied with the
   brand mockups. See the design system readme, "Font substitutions", before print work. */

:root {
  /* Elegant / concert-programme voice */
  --font-display: "Playfair Display", "Times New Roman", serif;
  --font-editorial: "EB Garamond", Georgia, serif;
  --font-body: "Lato", "Helvetica Neue", Arial, sans-serif;
  /* Midnight Sketchbook voice — defined but not loaded on this site */
  --font-script: "Yellowtail", "Brush Script MT", cursive;
  --font-hand: "Patrick Hand", "Comic Sans MS", cursive;
  --font-chunky: "Baloo 2", "Trebuchet MS", sans-serif;
}

/* ======================= tokens/colors.css ======================= */

/* Cheshire Saxophone Quartet — colour tokens.
   Copied verbatim from the design system (_ds/.../tokens/colors.css). */
:root {
  /* ---- Base palette: midnight navy ---- */
  --navy-900: #08122a;
  --navy-800: #0c1730;
  --navy-700: #132241; /* signature page ground, sampled from every mockup */
  --navy-600: #1b2f55;
  --navy-500: #24406e;
  --navy-400: #3b5787;

  /* ---- Base palette: watercolour emerald ---- */
  --emerald-900: #07382a;
  --emerald-800: #0e4d3a;
  --emerald-700: #12654b;
  --emerald-600: #16795a;
  --emerald-500: #2e9873;
  --emerald-400: #56b593;
  --emerald-300: #7fc4a8;
  --emerald-200: #b6e0cf;

  /* ---- Base palette: antique gold ---- */
  --gold-700: #8a6f33;
  --gold-600: #a98a46;
  --gold-500: #c9a860; /* hairline rules, line illustration */
  --gold-400: #dcc286;
  --gold-300: #e8ce8c; /* gold text on navy */
  --gold-200: #f3e3b4;

  /* ---- Neutrals ---- */
  --parchment: #f5f1e6;
  --parchment-dim: #ded8c7;
  --slate-300: #a9b6cc;
  --slate-400: #7e8ea8;
  --white: #ffffff;

  /* ---- Semantic surfaces ---- */
  --surface-page: var(--navy-700);
  --surface-deep: var(--navy-800);
  --surface-raised: var(--navy-600);
  --surface-sunken: var(--navy-900);
  --surface-light: var(--parchment);
  --surface-emerald: var(--emerald-800);
  --surface-scrim: rgba(8, 18, 42, 0.72);

  /* ---- Semantic text ---- */
  --text-primary: var(--parchment);
  --text-display: var(--gold-300);
  --text-muted: var(--slate-300);
  --text-subtle: var(--slate-400);
  --text-accent: var(--gold-400);
  --text-on-light: var(--navy-700);
  --text-on-light-muted: #4d5d7a;
  --text-on-gold: var(--navy-800);
  --text-on-emerald: var(--parchment);

  /* ---- Semantic lines ---- */
  --line-gold: rgba(201, 168, 96, 0.55);
  --line-gold-strong: var(--gold-500);
  --line-emerald: rgba(86, 181, 147, 0.6);
  --line-hairline: rgba(245, 241, 230, 0.16);
  --line-on-light: rgba(19, 34, 65, 0.18);

  /* ---- Interaction ---- */
  --interactive-gold: var(--gold-300);
  --interactive-gold-hover: var(--gold-200);
  --interactive-gold-press: var(--gold-400);
  --interactive-emerald: var(--emerald-500);
  --interactive-emerald-hover: var(--emerald-400);

  /* ---- Status (used sparingly: ticket availability, form validation) ---- */
  --status-available: var(--emerald-400);
  --status-limited: var(--gold-300);
  --status-soldout: #c96a5e;
  --status-error: #e08a7e;
}

/* ======================= tokens/typography.css ======================= */

/* Cheshire Saxophone Quartet — typography tokens.
   Copied verbatim from the design system (_ds/.../tokens/typography.css). */
:root {
  /* Size ramp — fluid on the web, fixed values safe for slides and print */
  --text-3xs: 11px;
  --text-2xs: 12px;
  --text-xs: 13px;
  --text-sm: 15px;
  --text-base: 17px;
  --text-lg: 19px;
  --text-xl: 22px;
  --text-2xl: 27px;
  --text-3xl: 34px;
  --text-4xl: 44px;
  --text-5xl: 56px;
  --text-6xl: 72px;
  --text-7xl: 92px;

  --leading-tight: 1.06;
  --leading-snug: 1.2;
  --leading-normal: 1.45;
  --leading-relaxed: 1.62;
  --leading-loose: 1.8;

  --tracking-tighter: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.09em;
  --tracking-widest: 0.18em; /* small-caps eyebrows, the one uppercase usage */

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 900;

  /* Role composites */
  --type-display: var(--weight-regular) var(--text-6xl) / var(--leading-tight) var(--font-display);
  --type-h1: var(--weight-regular) var(--text-5xl) / var(--leading-tight) var(--font-display);
  --type-h2: var(--weight-regular) var(--text-4xl) / var(--leading-snug) var(--font-display);
  --type-h3: var(--weight-regular) var(--text-2xl) / var(--leading-snug) var(--font-display);
  --type-editorial: var(--weight-regular) var(--text-xl) / var(--leading-relaxed) var(--font-editorial);
  --type-body: var(--weight-regular) var(--text-base) / var(--leading-relaxed) var(--font-body);
  --type-body-sm: var(--weight-regular) var(--text-sm) / var(--leading-normal) var(--font-body);
  --type-eyebrow: var(--weight-bold) var(--text-2xs) / 1.3 var(--font-body);
  --type-script: var(--weight-regular) var(--text-4xl) / 1.25 var(--font-script);
  --type-hand: var(--weight-regular) var(--text-lg) / var(--leading-relaxed) var(--font-hand);
  --type-chunky: 700 var(--text-xl) / 1.2 var(--font-chunky);
}

/* ======================= tokens/spacing.css ======================= */

/* Cheshire Saxophone Quartet — spacing and layout tokens.
   Copied verbatim from the design system (_ds/.../tokens/spacing.css). */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Layout */
  --container-max: 1180px;
  --container-narrow: 760px;
  --gutter: var(--space-6);
  --gutter-lg: var(--space-10);
  --section-y: var(--space-24);
  --section-y-sm: var(--space-16);

  /* Component rhythm */
  --control-h-sm: 36px;
  --control-h: 46px;
  --control-h-lg: 56px;
  --control-pad-x: var(--space-6);
  --card-pad: var(--space-6);
  --card-pad-lg: var(--space-8);
}

/* ======================= tokens/borders.css ======================= */

/* Cheshire Saxophone Quartet — border and frame tokens.
   Copied verbatim from the design system (_ds/.../tokens/borders.css). */
:root {
  /* The elegant voice is rectilinear: hairline gold rules, square frames. */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  /* The Midnight Sketchbook voice is soft and hand-drawn. */
  --radius-hand: 22px 18px 26px 16px;
  --radius-pill: 999px;
  --radius-blob: 48% 52% 46% 54% / 52% 46% 54% 48%;

  --border-hairline: 1px;
  --border-rule: 1.5px;
  --border-frame: 2px;
  --border-sketch: 2.5px;

  --frame-gold: var(--border-hairline) solid var(--line-gold);
  --frame-gold-strong: var(--border-frame) solid var(--line-gold-strong);
  --frame-emerald: var(--border-hairline) solid var(--line-emerald);
  --frame-hairline: var(--border-hairline) solid var(--line-hairline);

  /* Double gold rule — the programme-cover motif */
  --frame-double: var(--border-hairline) solid var(--line-gold-strong);
  --frame-double-offset: 5px;
}

/* ======================= tokens/effects.css ======================= */

/* Cheshire Saxophone Quartet — effect tokens.
   Copied verbatim from the design system (_ds/.../tokens/effects.css). */
:root {
  /* Shadows are rare on navy. Depth comes from gold line and watercolour bleed. */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(8, 18, 42, 0.4);
  --shadow-card: 0 10px 30px rgba(8, 18, 42, 0.45);
  --shadow-lift: 0 18px 48px rgba(8, 18, 42, 0.55);
  --shadow-on-light: 0 2px 10px rgba(19, 34, 65, 0.12);

  /* Gold glow replaces drop shadow for hover/focus on dark grounds */
  --glow-gold: 0 0 0 1px rgba(232, 206, 140, 0.5), 0 0 22px rgba(201, 168, 96, 0.22);
  --glow-emerald: 0 0 26px rgba(46, 152, 115, 0.3);
  --focus-ring: 0 0 0 2px var(--navy-700), 0 0 0 4px var(--gold-300);

  /* Sketchbook hatch shadow: a hard offset in place of a soft blur */
  --shadow-hatch: 4px 4px 0 rgba(201, 168, 96, 0.35);

  --blur-veil: blur(14px);
  --blur-scrim: blur(28px);

  /* Watercolour ground composites */
  --wash-vignette: radial-gradient(120% 90% at 50% 0%, rgba(36, 64, 110, 0.55) 0%, rgba(19, 34, 65, 0) 60%);
  --wash-emerald-veil: linear-gradient(180deg, rgba(14, 77, 58, 0) 0%, rgba(14, 77, 58, 0.45) 100%);
  --wash-protect-bottom: linear-gradient(180deg, rgba(8, 18, 42, 0) 0%, rgba(8, 18, 42, 0.85) 100%);
  --wash-protect-top: linear-gradient(180deg, rgba(8, 18, 42, 0.8) 0%, rgba(8, 18, 42, 0) 100%);

  --opacity-veil: 0.36;
  --opacity-disabled: 0.42;
}

/* ======================= tokens/motion.css ======================= */

/* Cheshire Saxophone Quartet — motion tokens.
   Copied verbatim from the design system (_ds/.../tokens/motion.css). */
:root {
  /* Slow, legato. Nothing bounces — this is a concert programme, not a toy. */
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --dur-veil: 800ms;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --transition-control: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-base) var(--ease-out);
  --transition-reveal: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}