/* M Jumbo design tokens. Light, friendly, precise: one brand blue, gold only on coins and Deal, red only on Best Value and Banker.
   Every value in site.css comes from here. --blue is sampled from logo.jpeg (2026-11-02). */
:root {
  color-scheme: light;
  /* Colour: surfaces */
  --bg: #f3f8ff;        /* pale sky page (home-v2, 2 Nov 2026) */
  --card: #ffffff;
  --surface: #eef4fc;
  --surface-2: #e9eef7;
  --border: #dce3ee;
  --border-strong: #c5d0e0;

  /* Colour: text */
  --text: #111827;
  --text-2: #5b6577;      /* 6.1:1 on --surface */
  --text-on-blue: #ffffff;
  --text-on-gold: #3b2a00;

  /* Colour: brand and states */
  --blue: #0370ed;        /* sampled from logo.jpeg on 2026-11-02 (#0370ed); 4.6:1 with white text */
  --blue-press: #0257bd;
  --blue-text: #0360cc;   /* blue as small text: 5.9:1 on white */
  --blue-soft: #e8f1ff;
  --blue-tint: rgb(3 112 237 / 0.12);
  --gold: #f5b700;
  --gold-deep: #d99a00;
  --gold-hi: #ffd54a;
  --red: #d0202d;         /* 5.3:1 with white text */
  --red-press: #b11a26;
  --pink: #d81b60;        /* 4.9:1 with white text */
  --player: #1d4ed8;
  --banker: #d7262e;
  --felt: #0f6b3a;
  --felt-deep: #0a4f2a;
  --felt-hi: #1c8a4f;
  --wood: #4a2a12;
  --white: #ffffff;
  --mask-solid: #000000;
  --white-60: rgb(255 255 255 / 0.6);
  --white-25: rgb(255 255 255 / 0.25);
  --white-85: rgb(255 255 255 / 0.85);
  --white-94: rgb(255 255 255 / 0.94);
  --header-bg: rgb(243 248 255 / 0.92);
  --border-blue: #bcd8f7;
  --white-35: rgb(255 255 255 / 0.35);
  --ink-25: rgb(0 0 0 / 0.25);
  --ink-35: rgb(0 0 0 / 0.35);
  --ink-40: rgb(0 0 0 / 0.4);
  --ink-50: rgb(0 0 0 / 0.5);
  --deal-shadow: #8a6200;
  --draw-sky: #bfe0ff;
  --draw-blush: #ffd9e4;
  --grad-cta: linear-gradient(90deg, #0f6fd6 0%, #0a4fb0 100%);   /* white text 4.9:1 at the light end */
  --grad-sky: linear-gradient(180deg, #d9ecff 0%, #f7fbff 100%);
  --sky-ink: #0b4fa8;
  --tag-popular: #a66a00;
  --tag-featured: #c2185b;
  --tag-new: #1e7d4f;
  --tag-experience: #c2410c;
  --marker: #ffe566;
  --chip-100: #2563eb;
  --chip-500: #7c3aed;
  --chip-1k: #15803d;
  --chip-5k: #dc2626;
  --chip-10k: #c2410c;
  --band: rgb(10 18 32 / 0.62);
  --band-strong: rgb(10 18 32 / 0.84);
  --scrim: rgb(17 24 39 / 0.45);
  --focus: #0370ed;

  /* Type */
  --font: "Inter", "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans", sans-serif;
  --font-display: "Yusei Magic", "Noto Sans JP", sans-serif;   /* marker-style headline face from the owner's concept screens */
  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-22: 1.375rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-hero: clamp(1.5rem, 1rem + 2.4vw, 2.75rem);
  --lh-head: 1.2;
  --lh-head-ja: 1.35;
  --lh-body: 1.5;
  --lh-body-ja: 1.75;

  /* Space (4/8 scale) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --gutter: 16px;
  --header-h: 56px;
  --tab-h: 58px;
  --tab-lift: 18px;      /* how far the raised centre tab rises above the bar */
  --content-max: 1200px;

  /* Radius */
  --r-pill: 999px;
  --r-chip: 10px;
  --r-card: 14px;
  --r-hero: 20px;

  /* Elevation */
  --shadow-1: 0 1px 2px rgb(17 24 39 / 0.06), 0 1px 1px rgb(17 24 39 / 0.04);
  --shadow-2: 0 4px 12px rgb(17 24 39 / 0.08), 0 1px 3px rgb(17 24 39 / 0.06);
  --shadow-3: 0 12px 40px rgb(17 24 39 / 0.18);
  --shadow-blue: 0 6px 16px rgb(3 112 237 / 0.28);

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --t-press: 140ms;
  --t-hover: 200ms;
  --t-drawer: 280ms;
  --t-sheet: 320ms;
}