/* ============================================================
   theme.css — デザイントークン
   お写真納品システム / Photo Delivery System
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&family=Shippori+Mincho:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ── 背景 ───────────────────────── */
  --bg-base:      #fafafa;
  --bg-surface:   #ffffff;
  --bg-elevated:  #ffffff;
  --bg-inset:     #f0f0f2;
  --bg-photo:     #ececec;

  /* ── テキスト ───────────────────── */
  --text-primary:   #1a1a1c;
  --text-secondary: #5b5b62;
  --text-tertiary:  #8a8a93;
  --text-onAccent:  #ffffff;

  /* ── 罫線 ───────────────────────── */
  --border-subtle:  rgba(0,0,0,0.06);
  --border-default: rgba(0,0,0,0.10);

  /* ── アクセント (深い藍 indigo系) ── */
  --accent:        #2a3a8c;     /* 深い藍 */
  --accent-hover:  #1f2e75;
  --accent-soft:   rgba(42,58,140,0.10);
  --accent-ring:   rgba(42,58,140,0.22);

  /* ── スター ────────────────────── */
  --star:          #d4a017;     /* ゴールド */
  --star-idle:     rgba(0,0,0,0.22);

  /* ── 状態色 ────────────────────── */
  --success: #1fa974;
  --warning: #d68910;
  --danger:  #d93a3f;

  /* ── 容量ゲージ ────────────────── */
  --gauge-track: var(--bg-inset);
  --gauge-fill:  var(--accent);
  --gauge-warn:  var(--warning);
  --gauge-over:  var(--danger);

  /* ── シャドウ ──────────────────── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.12);
  --shadow-xl: 0 24px 64px rgba(0,0,0,0.18);

  /* ── タイポグラフィ ────────────── */
  --font-sans: "Inter", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", system-ui, -apple-system, sans-serif;
  --font-serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-display: 2.25rem;
  --fs-h1:      1.75rem;
  --fs-h2:      1.375rem;
  --fs-h3:      1.125rem;
  --fs-body:    0.9375rem;
  --fs-sm:      0.8125rem;
  --fs-xs:      0.6875rem;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --lh-tight: 1.2;
  --lh-base:  1.55;

  /* ── スペーシング (4px base) ───── */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  /* ── 角丸 ────────────────────── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* ── レイアウト ─────────────── */
  --container-max: 1320px;
  --sidebar-w: 248px;
  --header-h: 64px;

  /* ── モーション ─────────────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;
  --dur-lux:    640ms;
}

[data-theme="dark"] {
  --bg-base:      #0e0e10;
  --bg-surface:   #18181b;
  --bg-elevated:  #232328;
  --bg-inset:     #26262c;
  --bg-photo:     #1f1f23;

  --text-primary:   #f4f4f6;
  --text-secondary: #b4b4bd;
  --text-tertiary:  #7d7d87;
  --text-onAccent:  #ffffff;

  --border-subtle:  rgba(255,255,255,0.06);
  --border-default: rgba(255,255,255,0.11);

  --accent:        #8aa1ff;
  --accent-hover:  #a5b6ff;
  --accent-soft:   rgba(138,161,255,0.14);
  --accent-ring:   rgba(138,161,255,0.30);

  --star:          #f0c14b;
  --star-idle:     rgba(255,255,255,0.28);

  --success: #2dd391;
  --warning: #f0b13a;
  --danger:  #f06a6e;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.32);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.42);
  --shadow-lg: 0 14px 36px rgba(0,0,0,0.55);
  --shadow-xl: 0 28px 70px rgba(0,0,0,0.68);
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --bg-base:      #0e0e10;
    --bg-surface:   #18181b;
    --bg-elevated:  #232328;
    --bg-inset:     #26262c;
    --bg-photo:     #1f1f23;
    --text-primary:   #f4f4f6;
    --text-secondary: #b4b4bd;
    --text-tertiary:  #7d7d87;
    --border-subtle:  rgba(255,255,255,0.06);
    --border-default: rgba(255,255,255,0.11);
    --accent:        #8aa1ff;
    --accent-hover:  #a5b6ff;
    --accent-soft:   rgba(138,161,255,0.14);
    --accent-ring:   rgba(138,161,255,0.30);
    --star:          #f0c14b;
    --star-idle:     rgba(255,255,255,0.28);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.32);
    --shadow-md: 0 4px 14px rgba(0,0,0,0.42);
    --shadow-lg: 0 14px 36px rgba(0,0,0,0.55);
    --shadow-xl: 0 28px 70px rgba(0,0,0,0.68);
  }
}

/* ── ベースリセット ───────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}

body { min-height: 100vh; }

img { max-width: 100%; display: block; }
button { font-family: inherit; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--accent-soft); color: var(--text-primary); }

/* スクロールバー (上品に) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: var(--radius-full);
  border: 2px solid var(--bg-base);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ユーティリティ */
.serif { font-family: var(--font-serif); font-weight: var(--fw-medium); letter-spacing: 0.02em; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--text-secondary); }
.faint { color: var(--text-tertiary); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}