/*
 * Coopedia — Design System
 * カラー・フォント・スペーシングの変数定義
 * wireframe.html のデザインをそのまま移植
 */

/* ─── Google Fonts は functions.php で読み込み済み ───────────────────────── */

/* ─── CSS Variables ─────────────────────────────────────────────────────── */
:root {
  /* Colors — The Archive Room palette */
  --bg:           #05050c;
  --bg-alt:       #07070f;
  --surface:      #0a0a18;
  --surface-2:    #111126;
  --surface-3:    #191934;
  --ice:          #7dd3fc;   /* 唯一の固定アクセント — soft sky blue */
  --ice-dim:      rgba(125, 211, 252, 0.10);
  --accent:       #7dd3fc;   /* --ice のエイリアス（既存コード互換） */
  --accent-dim:   rgba(125, 211, 252, 0.12);
  --accent-glow:  rgba(125, 211, 252, 0.35);
  --lime:         #86efac;
  --green:        #86efac;   /* --lime のエイリアス */
  --green-dim:    rgba(134, 239, 172, 0.12);
  --purple:       #c4b5fd;
  --text:         #e8e8f8;
  --text-dim:     #7070a8;
  --text-muted:   #45455e;
  --border:       rgba(255, 255, 255, 0.055);
  --border-accent: rgba(125, 211, 252, 0.3);

  /* Typography */
  --font-display: 'Bebas Neue', sans-serif;
  --font-syne:    'Syne', sans-serif;
  --font-ui:      'DM Sans', 'Noto Sans JP', sans-serif;
  --font-ja:      'Noto Sans JP', sans-serif;

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 80px;

  /* Border radius */
  --radius:     14px;
  --radius-sm:  8px;
  --radius-pill: 100px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease:     cubic-bezier(0.16, 1, 0.3, 1);
  --spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── Reset & Base ──────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ─── Typography scale ──────────────────────────────────────────────────── */
.font-display { font-family: var(--font-display); }
.font-ja      { font-family: var(--font-ja); }

/* ─── Utility classes ───────────────────────────────────────────────────── */
.text-accent  { color: var(--accent); }
.text-green   { color: var(--green); }
.text-muted   { color: var(--text-muted); }
.text-dim     { color: var(--text-dim); }