/* ============================================================
   Design Tokens — あーるわんえいと
   See DESIGN.md for usage guide
   ============================================================ */

:root {
  /* === Neutral === */
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-hover: #f0f0f2;
  --text: #1d1d1f;
  --text-muted: #525257;
  --border: #d2d2d7;

  /* === Brand === */
  --accent: #2c5282;
  --accent-hover: #1a365d;
  --accent-light: rgba(44, 82, 130, 0.08);
  --brand-pink: #e53e6b;
  --brand-pink-hover: #c4325a;

  /* === Semantic === */
  --star: #e8a317;
  --success: #2e7d32;
  --success-bg: #e8f5e9;
  --error: #c62828;
  --error-bg: #fbe9e7;
  --badge-new: #d4552a;
  --badge-sale: #e53e6b;
  --text-on-accent: #ffffff;

  /* === Shadows === */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);

  /* === Radius === */
  --radius-sm: 4px;
  --radius: 10px;
  --radius-lg: 10px;
  --radius-pill: 2rem;

  /* === Typography === */
  --text-xs: 0.7rem;
  --text-sm: 0.75rem;
  --text-base: 0.85rem;
  --text-md: 0.9rem;
  --text-body: 1rem;
  --text-lg: 1.1rem;
  --text-xl: 1.3rem;
  --text-2xl: 1.6rem;
  --weight-normal: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-tight: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* === Spacing === */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-xs: var(--space-1);
  --space-sm: var(--space-2);
  --space-md: var(--space-4);
  --space-lg: var(--space-6);
  --space-xl: var(--space-8);
  --space-2xl: var(--space-12);
}

/* === Admin Dark Theme (scoped to .admin-shell) === */
.admin-shell {
  --admin-bg: #0f0f0f;
  --admin-surface: #141414;
  --admin-surface-raised: #1e1e1e;
  --admin-surface-hover: #282828;
  --admin-border: #2a2a2a;
  --admin-border-strong: #3a3a3a;
  --admin-text: #f0f0f0;
  --admin-text-muted: #aaaaaa;
  --admin-text-dim: #999999;
  --admin-text-subtle: #d0d0d0;
  --admin-text-dimmer: #777777;
  --admin-accent: #e53e6b;
  --admin-accent-hover: #c4325a;
  --admin-danger: #8b0000;
  --admin-tag-bg: #2a1a2a;
  --admin-score-good: #4caf50;
  --admin-score-warn: #ff9800;
  --admin-score-warn-bg: #2a1f00;
  --admin-score-bad: #f44336;
}