/* =============================================================
   Time For A Show — Design Tokens
   Brand: A theatrical ticketing & show-discovery platform.
   Logo color: #2d85ee  •  Logo typeface: Limelight
   ============================================================= */

/* --- Fonts ----------------------------------------------------
   Web fonts load from a deferred stylesheet injected in app.html.
   Families: Limelight · Source Serif 4 (400–700) · Inter · JetBrains Mono
   --------------------------------------------------------------- */

/* Fallback faces width-matched to Inter and Source Serif 4 */
@font-face { font-family: 'Inter Fallback'; font-weight: 400; src: local('Arial'), local('Liberation Sans'), local('Arimo'); size-adjust: 108%; }
@font-face { font-family: 'Inter Fallback'; font-weight: 700; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Arimo Bold'); size-adjust: 102%; }
@font-face { font-family: 'Inter Fallback Roboto'; font-weight: 400; src: local('Roboto'); size-adjust: 108%; }
@font-face { font-family: 'Inter Fallback Roboto'; font-weight: 700; src: local('Roboto Bold'), local('Roboto-Bold'); size-adjust: 108%; }
@font-face { font-family: 'Source Serif Fallback'; font-weight: 400; src: local('Times New Roman'), local('Liberation Serif'), local('Tinos'); size-adjust: 117%; }
@font-face { font-family: 'Source Serif Fallback'; font-weight: 700; src: local('Times New Roman Bold'), local('TimesNewRomanPS-BoldMT'), local('Liberation Serif Bold'), local('Tinos Bold'); size-adjust: 114%; }
@font-face { font-family: 'Source Serif Fallback'; font-style: italic; font-weight: 400; src: local('Times New Roman Italic'), local('TimesNewRomanPS-ItalicMT'), local('Liberation Serif Italic'), local('Tinos Italic'); size-adjust: 109%; }

:root {
  /* ---------------------------------------------------------------
     COLOR  —  Built around the brand blue #2d85ee.
     The palette pairs that bright theatrical blue with a deep, inky
     "house lights down" navy and a warm, footlight-amber accent.
     Neutrals are a soft, paper-warm grey — not pure white — so the
     brand feels like a printed playbill rather than a tech site.
     --------------------------------------------------------------- */

  /* Brand — Spotlight Blue (anchor: #2d85ee) */
  --tfas-blue-50:  #eff6ff;
  --tfas-blue-100: #d9e9fd;
  --tfas-blue-200: #b6d3fb;
  --tfas-blue-300: #84b6f7;
  --tfas-blue-400: #5a9cf2;
  --tfas-blue-500: #2d85ee;   /* ★ brand */
  --tfas-blue-600: #1f6cd1;
  --tfas-blue-700: #1955a8;
  --tfas-blue-800: #143f7d;
  --tfas-blue-900: #102d59;

  /* Stage — deep curtain navy (primary dark surface) */
  --tfas-stage-50:  #eef1f7;
  --tfas-stage-100: #d3d9e6;
  --tfas-stage-200: #a3adc4;
  --tfas-stage-300: #6c7896;
  --tfas-stage-400: #3f4a68;
  --tfas-stage-500: #232c47;
  --tfas-stage-600: #1a2238;   /* hero / footer surface */
  --tfas-stage-700: #131a2c;
  --tfas-stage-800: #0d1322;
  --tfas-stage-900: #080c17;

  /* Footlight — warm amber accent (used sparingly: CTAs, badges,
     "tonight" markers, sold-out warnings counterpoint) */
  --tfas-amber-50:  #fef6e7;
  --tfas-amber-100: #fde7b8;
  --tfas-amber-200: #f8d27a;
  --tfas-amber-300: #f1b840;
  --tfas-amber-400: #e89e16;   /* ★ accent */
  --tfas-amber-500: #c47e08;
  --tfas-amber-600: #95600a;
  --tfas-amber-700: #6b450b;

  /* Velvet — claret/burgundy support (theatrical, used for tags
     like "Drama", "Premiere", and decorative type accents) */
  --tfas-velvet-300: #c8506a;
  --tfas-velvet-500: #99213c;
  --tfas-velvet-700: #5e0e22;

  /* Paper — warm neutrals (NOT pure white; subtle cream tint) */
  --tfas-paper-0:   #ffffff;
  --tfas-paper-50:  #fbfaf6;   /* page background */
  --tfas-paper-100: #f4f1e8;
  --tfas-paper-200: #e8e3d3;
  --tfas-paper-300: #d4cdb8;
  --tfas-paper-400: #a89f87;
  --tfas-paper-500: #7a7361;
  --tfas-paper-600: #534e42;
  --tfas-paper-700: #2f2c25;
  --tfas-paper-800: #1c1a16;

  /* Status */
  --tfas-success: #1f9d6a;
  --tfas-warning: #e89e16;
  --tfas-danger:  #c0392b;
  --tfas-info:    #2d85ee;

  /* ---------------------------------------------------------------
     SEMANTIC TOKENS (use these in product, not the raw scales)
     --------------------------------------------------------------- */
  --color-bg:           var(--tfas-paper-50);
  --color-bg-raised:    var(--tfas-paper-0);
  --color-bg-sunken:    var(--tfas-paper-100);
  --color-bg-inverse:   var(--tfas-stage-600);

  --color-fg:           var(--tfas-stage-700);
  --color-fg-muted:     var(--tfas-paper-600);
  --color-fg-subtle:    var(--tfas-paper-500);
  --color-fg-inverse:   var(--tfas-paper-50);

  --color-border:       var(--tfas-paper-200);
  --color-border-strong:var(--tfas-paper-300);
  --color-border-focus: var(--tfas-blue-500);

  --color-brand:        var(--tfas-blue-500);
  --color-brand-hover:  var(--tfas-blue-600);
  --color-brand-soft:   var(--tfas-blue-50);
  --color-accent:       var(--tfas-amber-400);
  --color-accent-soft:  var(--tfas-amber-50);

  /* ---------------------------------------------------------------
     TYPOGRAPHY
     --------------------------------------------------------------- */
  /* Limelight — display only. Reserved for the wordmark, hero
     headlines, marquee titles, section starters. Never below 24px;
     never for body copy. All-caps friendly; tracks well at large
     sizes. */
  --font-display: 'Limelight', 'Playfair Display', Georgia, serif;

  /* Source Serif 4 — editorial serif for headings and feature titles.
     Calm, refined, no quirky terminals. Pairs cleanly with Limelight:
     Limelight = marquee, Source Serif = playbill. */
  --font-serif:   'Source Serif 4', 'Source Serif Fallback', 'Source Serif Pro', Georgia, serif;

  /* Inter — UI workhorse. All controls, labels, body copy. */
  --font-sans:    'Inter', 'Inter Fallback', 'Inter Fallback Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* JetBrains Mono — order numbers, codes, ticket IDs. */
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Modular type scale (1.250 — Major Third) */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  84px;
  --text-7xl:  112px;

  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;   /* eyebrows / Limelight all-caps */

  /* ---------------------------------------------------------------
     SPACING (4-pt base)
     --------------------------------------------------------------- */
  --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;

  /* ---------------------------------------------------------------
     RADII — slightly soft, never pill-extreme. Theatre playbills
     tend toward sharp corners; we use radius for inputs/cards but
     keep marketing imagery edge-to-edge.
     --------------------------------------------------------------- */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-pill:999px;

  /* ---------------------------------------------------------------
     SHADOWS — soft, warm-tinted (never grey-on-grey)
     --------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(28, 26, 22, 0.05);
  --shadow-sm: 0 2px 4px rgba(28, 26, 22, 0.06), 0 1px 2px rgba(28, 26, 22, 0.04);
  --shadow-md: 0 6px 16px -4px rgba(28, 26, 22, 0.10), 0 2px 4px rgba(28, 26, 22, 0.05);
  --shadow-lg: 0 16px 32px -8px rgba(19, 26, 44, 0.18), 0 4px 8px rgba(28, 26, 22, 0.06);
  --shadow-xl: 0 28px 56px -12px rgba(19, 26, 44, 0.28);
  --shadow-glow:0 0 0 4px rgba(45, 133, 238, 0.18);

  /* ---------------------------------------------------------------
     MOTION
     --------------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   320ms;
  --duration-curtain:520ms;  /* used for hero reveals */

  /* Container widths */
  --container-sm:  640px;
  --container-md:  860px;
  --container-lg:  1100px;
  --container-xl:  1280px;
}

/* =============================================================
   BASE STYLES (use as a reset for any artifact in the kit)
   ============================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headings — Limelight. Use for marquee moments only. */
.tfas-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  line-height: var(--leading-tight);
  color: var(--color-brand);
}

/* Editorial heading — Fraunces serif */
.tfas-heading {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--color-fg);
  text-wrap: balance;
}

/* Eyebrow — small all-caps used above titles (Inter, tracked) */
.tfas-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-brand);
}