/* =========================================================
   Party Padel — Design Tokens
   Source: .design/party-padel/DESIGN_BRIEF.md (client brand
   guidelines v1.0). Every component should reference these
   variables — no hardcoded colour, spacing, radius or line
   weight in component CSS.

   Philosophy: closest named direction is Brutalist/Raw crossed
   with Swiss/International Typographic — flat black ground,
   one disciplined accent, square-cornered UI, hairline rules
   as structure. Not a literal copy of either: the brief's own
   language ("architectural grid," "premium broadcast graphics,"
   "confident, not arrogant") is the actual spec; the named
   philosophies are just the closest vocabulary for it.

   Deviation from the design-tokens skill default: NO light-mode
   palette is generated. The brief mandates Event Black (#090909)
   as the fixed primary background, never framed as one of two
   themes — "the site should be predominantly black" is brand
   identity, not a dark-mode preference. A light variant would
   contradict the brief. Single committed visual world.
   ========================================================= */

:root{

  /* ---------- Raw brand colours (brief §3 — exact hex, do not adjust) ---------- */
  --raw-party-acid:     #DFFF00;
  --raw-event-black:    #090909;
  --raw-clean-white:    #FFFFFF;
  --raw-concrete-grey:  #B9B9B9;
  --raw-carbon:         #171717;

  /* status colours — NOT in the brief; the brief has no vocabulary for
     5 distinct event states (Coming Soon / Entries Open / Limited /
     Sold Out / Completed) without one. Kept desaturated and used only
     as small status-pill text/borders, never as page-level colour, so
     they stay functional rather than becoming "rainbow nightclub
     colour" the brief explicitly rejects. [assumption] */
  --raw-status-limited: #FFB020;
  --raw-status-error:   #E5484D;

  /* ---------- Semantic colour tokens ---------- */
  --color-bg-primary:    var(--raw-event-black);
  --color-bg-secondary:  var(--raw-carbon);          /* cards/panels — only where grouping is necessary, brief §10 */
  --color-bg-tertiary:   #1f1f1f;                     /* [assumption] one step above Carbon, for inputs nested inside cards */
  --color-bg-inverse:    var(--raw-clean-white);

  --color-text-primary:    var(--raw-clean-white);
  --color-text-secondary:  var(--raw-concrete-grey);
  --color-text-tertiary:   rgba(255,255,255,0.52);    /* form notes, filter labels, loading/empty states, stepper numbers — used for real informational text sitewide (not just placeholders/disabled), so kept at the minimum alpha that clears WCAG AA 4.5:1 on Event Black (~5.7:1) */
  --color-text-inverse:    var(--raw-event-black);    /* black text on acid buttons */
  --color-text-link:       var(--color-accent-primary);

  --color-border-primary:   rgba(255,255,255,0.14);   /* [assumption] brief specifies no border colour; kept hairline-thin per court-line language */
  --color-border-secondary: rgba(255,255,255,0.08);
  --color-border-focus:     var(--raw-party-acid);

  --color-accent-primary:         var(--raw-party-acid);
  --color-accent-primary-hover:   #C7E600;  /* [assumption] deeper, not brighter — hover is a state change, not a glow */
  --color-accent-primary-active:  #B3CC00;
  --color-accent-secondary:       var(--raw-concrete-grey); /* [assumption] for ghost/outline interactive elements — brief defines no second accent by design */

  --color-status-open:     var(--raw-party-acid);   /* Entries Open */
  --color-status-limited:  var(--raw-status-limited);
  --color-status-closed:   var(--raw-concrete-grey); /* Sold Out / Completed — deliberately neutral, not red (nothing failed) */
  --color-status-error:    var(--raw-status-error);  /* form validation only */

  --color-surface-overlay: rgba(9,9,9,0.88);

  /* ---------- Spacing (4px base — matches the brief's "architectural grid" language)
     rem-based so spacing scales with the user's browser text-size preference,
     same as the font-size scale below. ---------- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  /* ---------- Typography ----------
     Brief §4: heavyweight condensed/semi-condensed grotesk, strong
     rectangular proportions, sport/fashion not esports/motorsport,
     no italics, no stencil. Anton (used in the prior draft) reads
     esports/gaming in real-world use — dropped. Archivo Black has
     the rectangular, architectural character the brief describes
     without that association. [assumption — swap for the licensed
     brand font the moment it's supplied; that's the entire point
     of routing every headline through this variable.] */
  --font-family-display: 'Archivo', 'Arial Narrow', sans-serif;
  --font-family-body:    'Inter', system-ui, sans-serif;
  --font-family-mono:    'JetBrains Mono', ui-monospace, monospace;

  --font-size-xs:   0.75rem;   /* 12px — metadata, fine print */
  --font-size-sm:   0.875rem;  /* 14px — secondary copy, labels */
  --font-size-base: 1rem;      /* 16px — body */
  --font-size-md:   1.125rem;  /* 18px — lead paragraphs */
  --font-size-lg:   1.5rem;    /* 24px — card headings */
  --font-size-xl:   2rem;      /* 32px — section subheads */
  --font-size-2xl:  2.75rem;   /* 44px — section headlines */
  --font-size-3xl:  4rem;      /* 64px — page headlines */
  --font-size-4xl:  6rem;      /* 96px — large display */
  --font-size-hero: clamp(2.75rem, 6.4vw, 6.25rem); /* hero wordmark scale, brief's "oversized typography" */

  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-black:     900;  /* display headlines — brief: "heavy weight" */

  --line-height-tight:   1.05;  /* display headlines */
  --line-height-normal:  1.5;   /* body */
  --line-height-relaxed: 1.7;   /* longer-form copy (About, rules) */

  --letter-spacing-tight:  -0.01em; /* display */
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.1em;   /* uppercase labels, nav, eyebrows — brief: "tight tracking" on headlines but wide on all-caps micro-labels is the standard pairing that keeps small caps legible */

  /* ---------- Layout ---------- */
  --max-width-content: 68ch;   /* body copy reading width */
  --max-width-wide:    1100px; /* card grids, forms */
  --max-width-page:    1320px; /* outer container — brief wants "immersive full-width," wider than a typical marketing site */

  /* Brief §6: "Corners mostly square or subtly rounded... avoid
     large pill-shaped interfaces except compact filters/tags." */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-full: 999px; /* reserved for compact status/filter chips ONLY — never buttons or cards */

  /* Line weights — brief §12 explicitly requires this as its own
     token category (the court-line device is the master graphic). */
  --line-weight-hairline: 1px;  /* dividers, table rules */
  --line-weight-court:    1.5px; /* the signature court-line device itself — "substantially thinner than letter strokes" */
  --line-weight-heavy:    2px;  /* emphasis rules, active tab underline */

  /* Shadows — neutral only. No colour-tinted / glowing shadows
     anywhere: brief §10 bans "glowing neon buttons" outright. */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.5);

  /* ---------- Motion ----------
     Brief: "fast cuts for event content, restrained motion for
     core UI" — no bounce/overshoot easing anywhere; that reads
     playful/Memphis, off brand personality ("confident, not
     arrogant"). */
  --duration-instant: 50ms;
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;

  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-in:      cubic-bezier(0.4, 0, 1, 1);
  --easing-out:     cubic-bezier(0, 0, 0.2, 1);

  /* ---------- Breakpoints ----------
     Referenced in comments only — CSS custom properties can't
     be used inside @media conditions, so component CSS repeats
     these as literal values. Kept here as the single source of
     truth for what those literals should be. */
  --breakpoint-sm:  375px;
  --breakpoint-md:  768px;
  --breakpoint-lg:  1024px;
  --breakpoint-xl:  1280px;
  --breakpoint-2xl: 1536px;
}

/* Strengthen hairline borders and tertiary text for users who've asked
   the OS for more contrast — same palette, no new colours, just less
   translucency where the base tokens lean on subtlety. */
@media (prefers-contrast: more){
  :root{
    --color-border-primary:   rgba(255,255,255,0.32);
    --color-border-secondary: rgba(255,255,255,0.2);
    --color-text-tertiary:    rgba(255,255,255,0.72);
  }
}