:root {
  /* ── Layout shell ─────────────────────────────────────────── */
  --topbar-h:  64px;
  --sidebar-w: 252px;

  /* ── Background scale (dark theme default) ───────────────── */
  --darkest:       #10121a;
  --darkest-trans: #10121ae0;
  --darker:        #171a26;
  --darker-trans:  #171a26d9;
  --base:          #162d3d;
  --base-trans:    #162d3da8;
  --light:         #465493;

  /* ── Accent colors ───────────────────────────────────────── */
  --green:        #3a6b54;
  --green-trans:  #3a6b54a8;
  --blue:         #1e3a5f;
  --blue-trans:   #1e3a5fa8;
  --red:          #A63232;
  --red-trans:    #A63232A8;
  --purple:       #5A3A6B;
  --purple-trans: #5A3A6Ba8;
  --orange:       #FF6B35;
  --orange-trans: #FF6B35a8;
  --yellow:       #F2C94C;
  --yellow-trans: #F2C94Ca8;

  /* ── Typography colors ───────────────────────────────────── */
  --font-base:            #8f99c5;
  --font-base-trans:      #8f99c57d;
  --font-highlight:       #e55c36;
  --font-highlight-trans: #e55c36a8;
  --font-danger:          #e53636;
  --font-danger-trans:    #e53636a8;
  --font-warning:         #FF9900;
  --font-warning-trans:   #FF9900a8;
  --font-accent:          #6e7cb7;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm: 0 0 14px rgba(0,0,0,0.35);
  --shadow-md: 0 0 22px rgba(0,0,0,0.45);
  --shadow-lg: 0 0 28px rgba(0,0,0,0.55);

  /* ── Border colors ───────────────────────────────────────── */
  --border-color:        rgba(143,153,197,0.25);
  --border-color-subtle: rgba(143,153,197,0.18);
  --border-color-strong: rgba(143,153,197,0.35);

  /* ── Background gradient surfaces ──────────────────────────
     Rule: components own structure; themes own the wash.
     Use these for art/showcase panels instead of hard-coding
     dark-mode rgba gradients directly on the component. */
  --surface-gradient-border: rgba(186,151,255,0.35);
  --surface-gradient-bg:
    radial-gradient(circle at 16% 18%, rgba(186,151,255,0.14), transparent 16rem),
    linear-gradient(180deg, rgba(102,77,145,0.18), rgba(255,255,255,0.02));

  /* ── Border-radius scale ─────────────────────────────────── */
  --radius-sm:  12px;
  --radius-md:  14px;
  --radius-lg:  18px;
  --radius-xl:  22px;
  --radius-2xl: 24px;

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;

  /* ── MTG mana pip colors ─────────────────────────────────── */
  --mana-W: #F8F6D8;
  --mana-U: #0E68AB;
  --mana-B: #150B00;
  --mana-R: #D3202A;
  --mana-G: #00733E;
}