/* Let's Entertain U — Color tokens
   Palette sampled directly from the brand logo: a five-color "marquee" set
   (red, blue, green, purple, gold) over a midnight-arcade neutral base. */

:root {
  /* ----- Brand scales ----- */

  /* Lane Red — the red pennant */
  --red-100: #FDE5E3;
  --red-300: #F58D8A;
  --red-500: #E62A2A;
  --red-600: #CB1F22;
  --red-700: #A2181B;

  /* Strike Blue — the cyan banner & lane oval */
  --blue-100: #D6F1FC;
  --blue-300: #6FCFF0;
  --blue-500: #00A6E4;
  --blue-600: #0089C2;
  --blue-700: #006A98;

  /* Lucky Green — the lime pennant */
  --green-100: #EAF4D7;
  --green-300: #C0DC84;
  --green-500: #8DBE3D;
  --green-600: #74A22B;
  --green-700: #577A1F;

  /* Razzle Purple — the ribbon (brand signature) */
  --purple-100: #F4E0EE;
  --purple-300: #D193BE;
  --purple-500: #A8458A;
  --purple-600: #8C3570;
  --purple-700: #6B2856;

  /* Marquee Gold — the lightbulb dots */
  --gold-100: #FFF3CC;
  --gold-300: #FFDD70;
  --gold-500: #FFC20E;
  --gold-600: #E5A400;
  --gold-700: #B37F00;

  /* ----- Neutrals ----- */
  --ink-900: #14122B;   /* midnight arcade — darkest surface */
  --ink-800: #221F40;
  --ink-700: #353154;
  --slate-500: #6B6884;
  --slate-400: #908DA6;
  --slate-300: #BFBDD0;
  --slate-200: #E2E1EC;
  --slate-100: #F1F0F7;
  --cream: #F5F4F2;     /* clean, cool off-white page base */
  --white: #FFFFFF;
  --black: #0A0917;

  /* ----- Semantic aliases ----- */
  --color-primary: var(--purple-500);
  --color-primary-hover: var(--purple-600);
  --color-accent: var(--gold-500);

  --bg-page: var(--cream);
  --bg-night: var(--ink-900);
  --surface-card: var(--white);
  --surface-sunken: var(--slate-100);

  --text-strong: var(--ink-900);
  --text-body: var(--ink-800);
  --text-muted: var(--slate-500);
  --text-inverse: var(--white);
  --text-on-night: #EDEBFA;

  --border-soft: var(--slate-200);
  --border-strong: var(--ink-900);

  /* Surface chrome (theme-aware) */
  --header-bg: rgba(245, 244, 242, 0.9);
  --header-border: var(--ink-900);
  --field-bg: var(--white);
  --field-border: var(--ink-900);

  --focus-ring: var(--blue-500);

  --success: var(--green-600);
  --warning: var(--gold-600);
  --danger: var(--red-500);
  --info: var(--blue-500);

  /* ----- Brand gradients ----- */
  --grad-marquee: linear-gradient(90deg, var(--red-500) 0%, var(--gold-500) 25%, var(--green-500) 50%, var(--blue-500) 75%, var(--purple-500) 100%);
  --grad-night: linear-gradient(160deg, var(--ink-800) 0%, var(--ink-900) 100%); /* @kind color */
}

/* ----- Dark theme -----
   Opt-in via [data-theme="dark"] on a root element. Built for the dim,
   glow-lit interior of the venue: deep midnight surfaces, light text.
   Only semantic aliases flip — the brand hues stay identical. */
:root[data-theme="dark"],
[data-theme="dark"] {
  --bg-page: #0F0D22;
  --surface-card: #1C1937;
  --surface-sunken: #14122B;

  --text-strong: #FFFFFF;
  --text-body: #E6E4F5;
  --text-muted: #A09DBC;

  --border-soft: #2E2A4D;
  --border-strong: #4A4570;

  --header-bg: rgba(15, 13, 34, 0.85);
  --header-border: #2E2A4D;
  --field-bg: #1C1937;
  --field-border: #3A3560;

  --grad-night: linear-gradient(160deg, #1A1736 0%, #0C0B1C 100%); /* @kind color */
}