/* tokens.css — the Premiere League Dice design tokens + shared components.
   Single source of truth for the palette, the metallic gold, shadows, radii,
   and the .btn / .pill / .inp components. Every page links this BEFORE its own
   <style> and aliases its local variable names to these tokens, so values
   can't drift between pages again. Edit colors HERE, nowhere else. */

:root{
  /* ---- gold (sampled from the PLD logo art) ---- */
  --pld-gold:#c9a24a;
  --pld-gold-bright:#d8b35a;       /* gold text on navy */
  --pld-gold-deep:#b8902f;         /* gold text on paper (contrast-safe) */
  --pld-gold-soft:#ecdcae;         /* pale gold wash */
  --pld-gold-ink:#3a2c08;          /* text on a gold surface */
  --pld-gold-grad:linear-gradient(180deg,#e3c886 0%,#cba74f 22%,#b88a34 50%,#a07827 74%,#85631d 100%);
  --pld-gold-border:#8a6d22;
  --pld-gold-bevel:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 3px rgba(120,90,20,.45),0 2px 5px rgba(0,0,0,.28);
  --pld-gold-text-shadow:0 1px 0 rgba(255,255,255,.4);

  /* ---- surfaces ---- */
  --pld-paper-1:#efe7d6; --pld-paper-2:#e6dcc6;
  --pld-paper-grad:linear-gradient(var(--pld-paper-1),var(--pld-paper-2));
  --pld-navy:#1c2a4d; --pld-navy-deep:#14213f; --pld-navy-raise:#243559;
  --pld-field:#0e1830;             /* input fields on navy */
  --pld-felt-red:#6e1019; --pld-felt-red-deep:#5a0d14;
  --pld-badge-red:#7e1b17;         /* the dark-red rim of the PLD badge art */

  /* ---- ink ramps ---- */
  --pld-ink:#f5f1e8;               /* light text on navy */
  --pld-muted:#c3c9d6; --pld-faint:#95a0b4;
  --pld-page-ink:#16223f;          /* dark text on paper */
  --pld-page-muted:#5b5f6b;

  /* ---- status colors (one semantic set) ---- */
  --pld-ok:#3f9e6a;                /* ok/live as a fill */
  --pld-ok-bright:#7fd6a4;         /* ok/live as text on navy */
  --pld-danger:#9e2b2b;            /* danger as a fill */
  --pld-danger-bright:#e0795f;     /* danger as text on navy */

  /* ---- lines, shadows, radii ---- */
  --pld-line:rgba(255,255,255,.12);
  --pld-line-gold:rgba(201,162,74,.45);
  --pld-shadow-sm:0 2px 7px rgba(0,0,0,.25);
  --pld-shadow-md:0 6px 18px rgba(20,25,45,.18);
  --pld-shadow-lg:0 16px 38px rgba(0,0,0,.45);
  --pld-radius-sm:9px; --pld-radius-md:13px; --pld-radius-lg:16px;

  /* ---- type scale (Oswald display / system body) ---- */
  --pld-fs-1:29px; --pld-fs-2:24px; --pld-fs-3:20px;
  --pld-fs-4:17px; --pld-fs-5:14px; --pld-fs-6:12px;
}

/* ---- buttons (canonical; pages must not redefine these) ---- */
.btn{border:none;border-radius:var(--pld-radius-sm);padding:10px 16px;
  font-family:'Oswald',-apple-system,sans-serif;text-transform:uppercase;letter-spacing:.04em;
  font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;text-align:center}
.btn.gold{background:var(--pld-gold-grad);color:var(--pld-gold-ink);
  border:1px solid var(--pld-gold-border);box-shadow:var(--pld-gold-bevel);text-shadow:var(--pld-gold-text-shadow)}
.btn.gold:hover{filter:brightness(1.05)}
.btn.dark{background:var(--pld-navy);color:var(--pld-ink);border:1px solid var(--pld-line)}
.btn.ghost{background:transparent;color:var(--pld-gold-bright);border:1px solid var(--pld-line-gold)}
.btn.danger{background:var(--pld-danger);color:#f5f1e8;border:1px solid rgba(255,255,255,.15)}
.btn.sm{padding:7px 11px;font-size:12.5px}
.btn.big{padding:14px 24px;font-size:16px;width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ---- status pills (Draft / Live / Complete) ---- */
.pill{font-family:'Oswald',sans-serif;font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  padding:3px 9px;border-radius:50px;font-weight:600;white-space:nowrap}
.pill.draft{background:rgba(255,255,255,.08);color:var(--pld-muted);border:1px solid var(--pld-line)}
.pill.running,.pill.live{background:rgba(63,158,106,.18);color:var(--pld-ok-bright);border:1px solid rgba(63,158,106,.4)}
.pill.complete,.pill.done{background:var(--pld-gold-grad);color:var(--pld-gold-ink);
  border:1px solid var(--pld-gold-border);box-shadow:var(--pld-gold-bevel);text-shadow:var(--pld-gold-text-shadow)}

/* ---- inputs on navy surfaces ---- */
.inp{width:100%;padding:10px 12px;border:1px solid var(--pld-line);border-radius:var(--pld-radius-sm);
  font-size:15px;background:var(--pld-field);color:var(--pld-ink)}
.inp:focus{outline:2px solid var(--pld-gold-bright);border-color:var(--pld-gold)}
.inp::placeholder{color:var(--pld-faint)}

/* ---- keyboard focus: the badge-rim red, like the small logo badge edge ---- */
[role="tab"]:focus-visible,[role="radio"]:focus-visible,.btn:focus-visible{
  outline:3px solid var(--pld-badge-red);outline-offset:2px}

/* ---- motion: respect the user's reduced-motion preference ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}