/* playajazz — Design Tokens
 * Single source of truth for all colors, typography, spacing.
 * Never hardcode hex values or spacing numbers elsewhere.
 * Generated by IfSoDreams spin-up · 2026-08-27
 */

/* Palette seeded 2026-08-26 from docs/playa-jazz-cafe-design-brief.md § Color Palette.
 * Those eight hexes are pulled from the logo and are BRAND TRUTH, not a suggestion.
 * The type stack below is deliberately still UNDECIDED — the brief names candidates
 * per role, not a choice. Pick in the build session and record it in DECISIONS.md.
 */

:root {
  /* ── Brand palette (from the logo — do not invent new hexes) ───────── */
  --ink-black:        #100A13;   /* deepest night — base background */
  --indigo-violet:    #352649;   /* deep background, sections */
  --plum:             #54305A;   /* mid purple, cards, the cat */
  --ember-terracotta: #DA705E;   /* primary warm accent, buttons */
  --sunset-coral:     #FAA166;   /* hero glow, sunset sky */
  --amber-gold:       #FCC96E;   /* highlight, stage light, hover */
  --rose-maroon:      #963B50;   /* transition tone, dusty depth */
  --bone-white:       #F1F0F1;   /* text on dark, instrument shine */

  /* ── Semantic roles ───────────────────────────────────── */
  --bg-primary:     var(--ink-black);
  --bg-secondary:   var(--indigo-violet);
  --bg-raised:      var(--plum);
  --color-primary:  var(--ember-terracotta);
  --color-accent:   var(--amber-gold);
  --text-dark:      var(--ink-black);      /* on light surfaces only */
  --text-mid:       rgba(241, 240, 241, 0.72);
  --text-light:     rgba(241, 240, 241, 0.48);
  --text-on-dark:   var(--bone-white);

  /* The signature gradient: coral at the top melting through rose into plum
   * and ink black, exactly like the logo sky. Hero background + section atmosphere.
   * The single most ownable visual the camp already has. */
  --grad-sunset: linear-gradient(
    180deg,
    var(--sunset-coral) 0%,
    var(--rose-maroon)  38%,
    var(--plum)         70%,
    var(--ink-black)    100%
  );

  /* ── Typography — CHOSEN 2026-08-27 (see DECISIONS.md) ──────────────
   * Display: Poiret One — thin, wide, art-deco geometric. It is the closest
   *          Google Font to the logo's own "PLAYA" lettering (hairline strokes,
   *          pointed apex on the A). ALL CAPS + generous tracking. Impact only.
   * Body:    Spectral — a nocturnal literary serif. Warm, readable, never corporate.
   * Utility: Special Elite — typewriter, so set times read like a posted set list.
   */
  --font-display:   'Poiret One', 'Cinzel Decorative', serif;
  --font-body:      'Spectral', Georgia, 'Times New Roman', serif;
  --font-utility:   'Special Elite', 'JetBrains Mono', ui-monospace, monospace;
  --tracking-display: 0.18em;
  --tracking-wide:    0.32em;

  /* legacy aliases — prefer the role names above */
  --font-sans:      var(--font-display);
  --font-serif:     var(--font-body);
  --font-mono:      var(--font-utility);

  /* ── Spacing scale ───────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Radii ───────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);

  /* ── Layout ──────────────────────────────────────────── */
  --measure:      68ch;      /* readable line length for body prose */
  --container:    1180px;    /* max content width */
  --container-narrow: 760px;
  --space-24: 96px;
  --space-32: 128px;

  /* ── Motion — slow and subtle, per the brief. One orchestrated
   *    moment beats ten scattered effects. ─────────────────── */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-slow:   900ms;
  --dur-mid:    520ms;
  --dur-fast:   240ms;

  /* ── Stage light — the warm glow every interactive thing gets ── */
  --glow-warm:  0 0 0 1px rgba(252, 201, 110, 0.42),
                0 0 28px -4px rgba(252, 201, 110, 0.45),
                0 0 60px -12px rgba(218, 112, 94, 0.38);
  --glow-soft:  0 0 44px -10px rgba(250, 161, 102, 0.30);

  /* ── Brand palette as RGB triplets ─────────────────────
   * Same eight colors, in the form rgba() needs when the alpha has to vary
   * at the call site (the neon glow stacks a different alpha per halo layer).
   * These are NOT new colors — keep them in lockstep with the hexes above. */
  --rgb-ink-black:        16, 10, 19;
  --rgb-indigo-violet:    53, 38, 73;
  --rgb-plum:             84, 48, 90;
  --rgb-ember-terracotta: 218, 112, 94;
  --rgb-sunset-coral:     250, 161, 102;
  --rgb-amber-gold:       252, 201, 110;
  --rgb-rose-maroon:      150, 59, 80;
  --rgb-bone-white:       241, 240, 241;

  /* ── Rules and edges ─────────────────────────────────── */
  --rule:       rgba(241, 240, 241, 0.14);
  --rule-warm:  rgba(252, 201, 110, 0.30);
}