/* ============================================================
   tokens.css — Canonical design tokens (MadLadsLab shared UI)
   SINGLE SOURCE OF TRUTH. Synced into each app's /public/css/.

   DIRECTION (locked): refined DARK + GOLD, unified across apps.
   Principle: ONE hero color (gold). Everything else is neutral
   grayscale, and semantic colors are muted so the gold always leads.
   That restraint is what separates "designed" from "generated."

   In scope : graffiti-tv · greealitytv · games (CHROME only) · servers · opsTrain
   NOT      : slab (own system) · game skins (felt/steel/neon stay local)
   ============================================================ */

@layer tokens {
  :root {

    /* ---- Surfaces · intentional even ladder (page → elevated) ----
       Even ~9-point steps so elevation reads as deliberate depth,
       not random shades. Faintly cool-neutral to sit calmly under gold. */
    --bg:            #0b0b0c;  /* page background */
    --surface:       #141416;  /* raised panels / sections */
    --surface-2:     #1d1d20;  /* cards / wells */
    --surface-3:     #26262a;  /* popovers, modals, input hover */
    --border:        #2c2c31;  /* hairline dividers */
    --border-strong: #3a3a40;  /* emphasized dividers */

    /* ---- Text · role-based, theme-agnostic ---- */
    --text:        #ececee;    /* primary  (collapsed --ink/--text/--fg/--on-surface) */
    --text-muted:  #9a9aa2;    /* secondary (neutralized; green tint dropped) */
    --text-faint:  #66666e;    /* tertiary / placeholders */

    /* ---- Brand · GOLD, single hero, everywhere ----
       No more per-app brand. greealitytv's red-orange and opsTrain's
       amber were drift, not intent — collapsed into one token. */
    --brand:        #e3c567;   /* champagne gold — the hero accent */
    --brand-strong: color-mix(in srgb, var(--brand) 82%, black);        /* pressed / active */
    --brand-soft:   color-mix(in srgb, var(--brand) 14%, transparent);  /* hover/selection tint */
    --on-brand:     #0b0b0c;   /* text/icons on a gold fill */
    --ring:         color-mix(in srgb, var(--brand) 55%, transparent);  /* focus ring */

    /* ---- Semantic · MUTED on purpose, so gold stays the loudest thing ----
       Warning is pushed orange so it never gets mistaken for brand gold. */
    --success:  #46b87f;
    --warning:  #e0953f;
    --danger:   #d4564a;
    --info:     #5b93b8;

    /* ---- Radius ---- */
    --radius-sm: 6px;
    --radius:    8px;
    --radius-lg: 14px;

    /* ---- Spacing · 4px base ---- */
    --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
    --space-4: 16px;  --space-5: 24px;  --space-6: 32px;

    /* ---- Elevation · soft + low-spread (reads right on dark) ---- */
    --shadow-sm: 0 1px 3px rgba(0,0,0,.40);
    --shadow:    0 6px 24px rgba(0,0,0,.45);
    --shadow-lg: 0 20px 64px rgba(0,0,0,.55);

    /* ---- Typography ---- */
    --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-heading: var(--font-body);   /* swap point: set ONE display face here later */
    --text-xs: 0.72rem;  --text-sm: 0.85rem;  --text-md: 1rem;
    --text-lg: 1.25rem;  --text-xl: 1.6rem;   --text-2xl: 2.1rem;

    /* ---- Ergonomics ---- */
    --tap: 44px;               /* minimum touch target */
  }
}

/* ============================================================
   Brand is unified — no per-app overrides needed.
   The [data-app="..."] hook still exists if a future app ever needs
   to diverge, but today every app inherits the same gold. That's
   the point of the choice you made.
   ============================================================ */