/* ============================================================
   BlueSyndicate Design System — CSS Custom Properties
   Updated: 2026-05-21
   Changes:
   - --cyan: #00c2e0 → #5ba3c9 (Steel Blue)
   - --silver: #8aa4c8 → #b8cfe8 (improved contrast)
   - --muted: #4a6585 → #6a88a8 (improved contrast)
   - Space Grotesk added for logo wordmark
   - --font-logo variable added
   - rgba values updated throughout
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,400&family=DM+Sans:wght@300;400;500&family=Space+Grotesk:wght@300;400;500;700&display=swap');

/* ── Color Palette ────────────────────────────────────────── */
:root {
  --bg:       #060d1a;
  --surface:  #0d1b2e;
  --card:     #112236;
  --border:   rgba(100, 160, 255, 0.1);
  --text:     #dce8f5;
  --muted:    #8aabb0;   /* #6a88a8 → 明るく */
  --silver:   #c8dff0;   /* #b8cfe8 → 明るく */
  --blue:     #2d6be4;
  --cyan:     #00c2e0;   /* #5ba3c9 → 元の鮮やかなシアンに戻す */
  --gold:     #c8a84b;
  --green:    #00c896;
  --purple:   #b48cff;

  /* Rarity accent colors */
  --rarity-associate:    var(--silver);
  --rarity-professional: var(--cyan);
  --rarity-academy:      var(--gold);
  --rarity-senior:       var(--purple);

  /* Rarity fill (low opacity for chart / card backgrounds) */
  --rarity-associate-fill:    rgba(184, 207, 232, 0.12);
  --rarity-professional-fill: rgba(91, 163, 201, 0.12);
  --rarity-academy-fill:      rgba(200, 168, 75, 0.12);
  --rarity-senior-fill:       rgba(180, 140, 255, 0.12);
}

/* ── Typography ───────────────────────────────────────────── */
:root {
  --font-heading: 'Lora', serif;
--font-body:    'DM Sans', sans-serif;
--font-logo:    'Space Grotesk', sans-serif;

  /* Scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;

  /* Weight */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;

  /* Letter-spacing */
  --tracking-wide:   0.1em;
  --tracking-wider:  0.15em;
  --tracking-widest: 0.2em;
}

/* ── Spacing ──────────────────────────────────────────────── */
:root {
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
}

/* ── Layout ───────────────────────────────────────────────── */
:root {
  --max-width:      1200px;
  --max-width-text: 720px;
  --gutter:         var(--space-6);
  --radius-sm:      4px;
  --radius-md:      8px;
  --radius-lg:      12px;
  --radius-xl:      16px;
  --radius-pill:    9999px;
}

/* ── Shadows / Glows ──────────────────────────────────────── */
:root {
  --shadow-card:  0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 8px 40px rgba(91, 163, 201, 0.08);
  --glow-cyan:    0 0 20px rgba(91, 163, 201, 0.2);
  --glow-blue:    0 0 20px rgba(45, 107, 228, 0.2);
}

/* ── Transitions ──────────────────────────────────────────── */
:root {
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-flip:   0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Z-index ──────────────────────────────────────────────── */
:root {
  --z-base:    0;
  --z-card:    10;
  --z-sticky:  100;
  --z-modal:   200;
  --z-toast:   300;
}

/* ── Light Theme ──────────────────────────────────────────── */
body.theme-light {
  --bg:      #f0f4f8;
  --surface: #ffffff;
  --card:    #ffffff;
  --border:  rgba(0, 0, 0, 0.08);
  --text:    #1a2a3a;
  --muted:   #5a7080;
  --silver:  #3a5060;
  --cyan:    #0088aa;
}