/* ═══ Real Mobile Legends - design tokens (spec-04 section 06) ═══
   Rule: never write a colour literal in a component, always var(--token).
   Every token is defined on bare :root first, so nothing can disappear in one
   theme. The dark values are then repeated for both the system preference and
   the explicit toggle. */

:root {
  /* brand */
  --gold: #a87516;
  --gold-lift: #c68f22;
  --gold-bg: #f8f0dc;
  --cyan: #0e7a8c;
  --cyan-lift: #159aae;
  --cyan-bg: #ddf0f3;
  --violet: #6b4fc4;
  --violet-bg: #ece6fa;

  /* semantic */
  --ok: #1b7a4f;
  --ok-bg: #e0f1e8;
  --warn: #9a6206;
  --warn-bg: #fbf1dc;
  --danger: #b02f2c;
  --danger-bg: #fae7e6;

  /* surfaces */
  --ground: #f5f4f9;
  --surface: #ffffff;
  --surface-2: #edebf4;
  --sunk: #e4e1ee;
  --ink: #141323;
  --ink-mid: #3d3956;
  --ink-soft: #676282;
  --ink-faint: #918cab;
  --line: #dedbea;
  --line-strong: #c7c2da;

  /* value tiers */
  --t5: #b03a2e;
  --t5-bg: #fae5e2;
  --t4: #7a44b8;
  --t4-bg: #f0e7fa;
  --t3: #2a5fb0;
  --t3-bg: #e2eaf8;
  --t2: #12766a;
  --t2-bg: #dcf0ed;
  --t1: #6e6980;
  --t1-bg: #eeecf2;

  /* type */
  --sans: "Pinar", "Vazirmatn", system-ui, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* radius and spacing */
  --r-sm: 5px;
  --r-md: 9px;
  --r-lg: 14px;
  --r-xl: 16px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --gold: #e5b454;
    --gold-lift: #f2c76d;
    --gold-bg: #2a2214;
    --cyan: #4bc5dc;
    --cyan-lift: #6fd6e9;
    --cyan-bg: #0f272d;
    --violet: #a48bf0;
    --violet-bg: #211a36;
    --ok: #55c68e;
    --ok-bg: #122a1f;
    --warn: #e0a93c;
    --warn-bg: #2a2113;
    --danger: #ee7b77;
    --danger-bg: #2e1817;
    --ground: #0c0b16;
    --surface: #16151f;
    --surface-2: #1e1c2b;
    --sunk: #100f1a;
    --ink: #efedf7;
    --ink-mid: #bfbad4;
    --ink-soft: #948fae;
    --ink-faint: #6c6788;
    --line: #282639;
    --line-strong: #3a3752;
    --t5: #f0837a;
    --t5-bg: #2e1a19;
    --t4: #bf9bf2;
    --t4-bg: #231b33;
    --t3: #7fa8ee;
    --t3-bg: #171f2e;
    --t2: #4fc4b2;
    --t2-bg: #0f2823;
    --t1: #a29db5;
    --t1-bg: #1f1d2a;
  }
}

/* The same block again, so the manual toggle wins in both directions. */
:root[data-theme="dark"] {
  --gold: #e5b454;
  --gold-lift: #f2c76d;
  --gold-bg: #2a2214;
  --cyan: #4bc5dc;
  --cyan-lift: #6fd6e9;
  --cyan-bg: #0f272d;
  --violet: #a48bf0;
  --violet-bg: #211a36;
  --ok: #55c68e;
  --ok-bg: #122a1f;
  --warn: #e0a93c;
  --warn-bg: #2a2113;
  --danger: #ee7b77;
  --danger-bg: #2e1817;
  --ground: #0c0b16;
  --surface: #16151f;
  --surface-2: #1e1c2b;
  --sunk: #100f1a;
  --ink: #efedf7;
  --ink-mid: #bfbad4;
  --ink-soft: #948fae;
  --ink-faint: #6c6788;
  --line: #282639;
  --line-strong: #3a3752;
  --t5: #f0837a;
  --t5-bg: #2e1a19;
  --t4: #bf9bf2;
  --t4-bg: #231b33;
  --t3: #7fa8ee;
  --t3-bg: #171f2e;
  --t2: #4fc4b2;
  --t2-bg: #0f2823;
  --t1: #a29db5;
  --t1-bg: #1f1d2a;
}