/* ============================================================================
   GotTickets design tokens — the single source of truth.
   ============================================================================

   WHY THIS FILE EXISTS

   The same :root block was copy-pasted into five standalone marketing pages
   (/get-paid, /your-tickets, /sell-tickets, /venue-network, /features), while
   the app pages, the auth pages and the ticket PDF each carried their own idea
   of the brand colour. An audit of the CSS found NINE different reds and pinks
   in use:

       #ff295f (53)  app, dashboards, profile
       #ff1f6b (32)  the five marketing pages
       #ff4d2e (15)  marketing gradient partner
       #ff4b2b (14)  dashboard gradient partner
       #e0405f (13)  analytics "down" state
       #e50914  (8)  login and register
       #d71920  (8)  the ticket PDF
       #ff3b30  (1)  login, a second red again
       #c62828  (1)  one email

   Nobody chose nine. They accumulated, because there was nowhere to put the
   decision. Changing the brand meant finding every copy, and missing one was
   the normal outcome rather than the exception.

   HOW TO USE IT

   Everything reads from --gt-* below. A page that needs its own vocabulary
   aliases it (--pink: var(--gt-brand)) rather than restating a hex, so there is
   exactly one place to change a colour.

   WHAT IS DELIBERATELY NOT UNIFIED

   The per-audience accents. Green means money on /get-paid, cyan means tickets
   for buyers, gold means venues. Those are signals, not decoration, and
   flattening them would lose information. They live here as named tokens so
   they are a decision rather than an accident.
   ============================================================================ */

:root {
    /* ---- brand -------------------------------------------------------- */
    /* The canonical red — the deeper, more classic red the login page always
       used, chosen by the owner over the #ff295f that merely happened to be the
       most common. Usage counts describe what accumulated, not what was decided.
       To change the brand, change these two lines and nothing else; the hex and
       the channels must move together or solid colours and translucent ones
       drift apart. */
    --gt-brand:        #e50914;
    --gt-brand-2:      #ff4b2b;   /* gradient partner, warm end */
    /* The same colour as channels, because rgba() cannot take a var() for its
       components. Without this the convergence only moved SOLID colours: every
       translucent glow, focus ring and shadow kept its old value, so a page
       ended up disagreeing with itself — a pink button on a deep-red stub. */
    --gt-brand-rgb:    229, 9, 20;
    --gt-brand-2-rgb:  255, 75, 43;

    --gt-brand-soft:   rgba(var(--gt-brand-rgb), .16);
    --gt-brand-line:   rgba(var(--gt-brand-rgb), .35);

    /* ---- audience accents (meaning, not decoration) -------------------- */
    --gt-money:        #39e58c;   /* promoter earnings   */
    --gt-ticket:       #25e3ff;   /* buyer / ticketing   */
    --gt-venue:        #ffd166;   /* venues              */

    /* ---- status ------------------------------------------------------- */
    --gt-ok:           #34d399;
    --gt-warn:         #f5a524;
    --gt-danger:       #ff4d6e;

    /* ---- dark surfaces (app, dashboards, marketing) -------------------- */
    --gt-bg:           #05050a;
    --gt-surface:      #0d0f16;
    --gt-panel:        #161923;
    --gt-panel-2:      #13151d;
    --gt-line:         rgba(255, 255, 255, .08);
    --gt-line-strong:  rgba(255, 255, 255, .14);

    /* ---- text --------------------------------------------------------- */
    --gt-ink:          #ffffff;
    --gt-ink-muted:    #b9bbca;
    --gt-ink-soft:     #8f95a8;
    --gt-ink-dark:     #161a2b;   /* on light surfaces */

    /* ---- shape -------------------------------------------------------- */
    --gt-radius-sm:    9px;
    --gt-radius:       14px;
    --gt-radius-lg:    18px;
    --gt-radius-pill:  999px;

    /* ---- controls ----------------------------------------------------
       The component layer reads these. Buttons across the codebase carried 16
       different corner radii and 8 font weights, because every page invented its
       own; these are the values they converge on. */
    --gt-control-h:      44px;   /* minimum touch target — WCAG 2.5.5 */
    --gt-control-h-sm:   36px;   /* dense contexts: table rows, toolbars */
    --gt-control-h-lg:   56px;   /* hero actions */
    --gt-focus-ring:     0 0 0 3px rgba(var(--gt-brand-rgb), .35);

    /* Aliases for the older names already used by admin-theme.css, so there is
       one set of values with two spellings rather than two sets. */
    --gt-r-sm:         var(--gt-radius-sm);
    --gt-r:            var(--gt-radius);
    --gt-r-lg:         var(--gt-radius-lg);

    /* ---- type --------------------------------------------------------- */
    --gt-display:      'Anton', Impact, sans-serif;
    --gt-body:         'Manrope', system-ui, Arial, sans-serif;
}