/* ============================================================
   Rokin — brand tokens
   THE single source of truth for every colour, radius, and
   timing in the codebase. Linked FIRST on every page.

   Before this file existed, this :root block was copy-pasted
   into the inline <style> of all 15 pages (Plan.md §7.1). It is
   now defined once. Nothing else may hardcode a brand colour.

   Load order in every page:
     1. tokens.css    ← this file
     2. base.css      ← Rokin component library (Rokin-native pages only)
     3. page <style>  ← page-specific rules
     4. mobile.css    ← responsive overrides, wins on small screens

   BRANDING: when real Rokin colours arrive, this file is the
   only one that changes.
   ============================================================ */

:root {
  /* ── Brand palette (PLACEHOLDER — carried over from the
        predecessor design system; swap for real Rokin colours) ── */
  --navy:         #212246;   /* primary brand / dark surfaces */
  --navy-mid:     #2a2860;
  --navy-light:   #353280;
  --accent:       #4942ce;   /* CTAs, prices, active states, icons */
  --accent-light: #6b65d9;   /* accent hover */
  --accent-tint:  #eeecf9;   /* icon circles, soft accent fills */

  /* ── Surfaces ── */
  --white:        #ffffff;
  --cream:        #faf8f4;   /* card / section background */
  --bg:           #f4f3f8;   /* page background */

  /* ── Text ── */
  --text-primary:   #212246;
  --text-secondary: #5c6478;
  --text-muted:     #9aa0b4;

  /* ── Lines ── */
  --border:       rgba(34,33,75,0.1);
  --border-hover: rgba(34,33,75,0.2);

  /* ── Status ── */
  --success:     #059669;
  --success-tint: #d1fae5;
  --danger:      #dc2626;
  --danger-tint: rgba(229,62,62,0.1);
  --warning:     #d97706;

  /* ── Elevation ──
     The only shadows in the system. Cards lift on hover. */
  --card-shadow:       0 2px 16px rgba(34,33,75,0.08);
  --card-shadow-hover: 0 8px 32px rgba(34,33,75,0.15);

  /* ── Geometry & motion ──
     radius stays 0 everywhere by design; only circles use 50%. */
  --radius: 0;
  --shell:  1280px;
  --t-hover: 0.15s;
  --t-focus: 0.2s;

  /* ── Legacy aliases ──────────────────────────────────────────
     The pages carried over from the predecessor use these names.
     They are aliases, not separate colours — never give one its
     own value. Retire them as pages are rewritten.

     NOTE: --red was inconsistent in the source (#e53e3e on the
     live-auctions page, #dc2626 on the two auction-app pages).
     Consolidated here onto --danger. */
  --icon-bg:     var(--accent-tint);
  --green:       var(--success);
  --green-light: var(--success-tint);
  --red:         var(--danger);
  --red-light:   var(--danger-tint);
  --amber:       var(--warning);
}