:root {
  /* ---- Royal Street palette ---- */
  --bg: #0C0D12;                 /* asphalt black */
  --bg-elev: #14161F;            /* elevated surface */
  --bg-card: #1A1D29;
  --line: #2A2E3D;
  --text: #F2F1EC;
  --text-dim: #9BA0B3;
  --text-faint: #6A6F82;

  --gold: #E8B84B;               /* royal gold */
  --gold-deep: #C79A2E;
  --orange: #FF5A1F;             /* court orange */
  --orange-soft: #FF7A45;
  --green: #43C56B;
  --red: #E85555;
  --blue: #3D6BE8;

  --tier-free: #8B8FA3;
  --tier-crew: #E87B2E;
  --tier-royal: #E8B84B;

  /* ---- type ---- */
  --font-display: 'Anton', 'Noto Sans JP', sans-serif;
  --font-cond: 'Oswald', 'Noto Sans JP', sans-serif;
  --font-body: 'Noto Sans JP', system-ui, sans-serif;

  --text-xs: 0.72rem;
  --text-sm: 0.84rem;
  --text-md: 1rem;
  --text-lg: clamp(1.15rem, 1rem + 0.6vw, 1.35rem);
  --text-xl: clamp(1.6rem, 1.3rem + 1.4vw, 2.1rem);
  --text-hero: clamp(2.4rem, 1.8rem + 3vw, 3.6rem);

  /* ---- space & radius ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --r-sm: 6px; --r-md: 12px; --r-lg: 18px;

  /* ---- motion ---- */
  --dur-fast: 150ms;
  --dur: 280ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-card: 0 8px 28px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.6);

  --app-max: 480px;
  --nav-h: 62px;
}