/* ehon-lib design tokens — SSOT: /opt/ehon-lib/DESIGN.md
 *
 * Base: 無印良品 (静謐・余白) + ほぼ日 (pill / spot badge) mix
 * Anti-slop: taste-skill redesign + soft 規約遵守
 * 全 +page.svelte は hardcoded color を持たず、 var(--...) で参照する
 */

:root {
  /* ===== Color: Brand ===== */
  --color-brand: #5c4a1e;
  --color-brand-deep: #4a3e1f;
  --color-bg: #fff8e7;

  /* ===== Color: Surface ===== */
  --color-surface-card: #fffbf0;
  --color-surface-soft: #f7f1e0;
  --color-surface-accent-pale: #f0e0c0;
  --color-surface-camera: #1a1408;

  /* ===== Color: Text (warm gray scale) ===== */
  --color-text-primary: #2d2412;
  --color-text-strong: #4a3e1f;
  --color-text-body: #5c4a1e;
  --color-text-muted: #7a6c47;
  --color-text-caption: #9a8c67;
  --color-text-disabled: #b8ac8a;
  --color-text-inverse: #fff8e7;

  /* ===== Color: Border ===== */
  --color-border: #e8dec2;
  --color-border-strong: #d4c290;

  /* ===== Color: Semantic ===== */
  --color-danger-fg: #c03030;
  --color-danger-bg: #fde8e8;
  --color-warning-fg: #d4a40c;
  --color-warning-bg: #fdf6e0;
  --color-success-fg: #2d8a2d;
  --color-info-fg: #005588;

  /* ===== Color: Hobonichi spot badge ===== */
  --color-badge-yellow-bg: #ebd833;
  --color-badge-light-blue-bg: #dbf2ff;
  --color-badge-green-bg: #5dae64;
  --color-badge-green-fg: #f3fff4;
  --color-badge-pink-bg: #f3c0d9;

  /* ===== Spacing scale (4-64) ===== */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 20px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 40px;
  --space-3xl: 48px;
  --space-4xl: 64px;

  /* ===== Radius ===== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ===== Motion ===== */
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;

  /* ===== Typography ===== */
  --font-family-base:
    -apple-system, BlinkMacSystemFont,
    "Hiragino Sans", "Yu Gothic UI",
    "Noto Sans JP", "Noto Sans JP Fallback",
    sans-serif;
  --font-family-display:
    "Hiragino Mincho ProN", "Yu Mincho", "YuMincho",
    "Noto Serif JP", "Noto Serif CJK JP",
    "Times New Roman", serif;
  --font-size-h1: 1.5rem;
  --font-size-h2: 1.1rem;
  --font-size-h3: 1rem;
  --font-size-body: 1rem;
  --font-size-small: 0.85rem;
  --font-size-caption: 0.8rem;
  --font-size-badge: 0.75rem;
  --line-height-body: 1.6;
  --line-height-heading: 1.3;

  /* ===== Layout ===== */
  --container-max: 720px;
  --touch-target: 44px;

  /* ===== Bookflix (Phase 2、 DESIGN.md §8) ===== */
  --cover-aspect-ratio: 2 / 3;
  --cover-w-sm: 112px;
  --cover-w-md: 144px;
  --cover-w-lg: 192px;
  --cover-w-hero: clamp(220px, 50vw, 320px);
  --row-gap: var(--space-md);              /* row 内 cover 間 */
  --row-spacing: var(--space-2xl);         /* row 間 */
  --hero-padding-block: var(--space-3xl);
  --shadow-cover: 0 4px 16px color-mix(in srgb, #2d2412 12%, transparent);
  --shadow-cover-hover: 0 6px 22px color-mix(in srgb, #2d2412 18%, transparent);
  --font-size-display: clamp(1.75rem, 5vw, 2.5rem);   /* Hero タイトル */
  --font-size-row-title: 1.15rem;                     /* Row 見出し */

  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-feature-settings: normal;
  font-variant-numeric: tabular-nums;
  word-break: normal;
  overflow-wrap: anywhere;
  position: relative;
}

/* Bookflix paper noise: subtle SVG noise overlay。 印刷物の微妙な濃淡を表現、
 * flat cream の AI 出力臭を抑える。 opacity 0.025 で気付かないレベル。
 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.025;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.14  0 0 0 0 0.07  0 0 0 1 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  mix-blend-mode: multiply;
}
body > * {
  position: relative;
  z-index: 1;
}

/* h1 は明朝 (display font) を base にして「絵本」 らしい格を出す。
 * Phase 2 で letter-spacing を負に振り (intentional な見出し感)、 line-height を更にタイトに。
 * 各 page.svelte は font-size / margin のみ override し font-family は継承。
 */
h1 {
  font-family: var(--font-family-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-wrap: balance;
}

/* ===== Shared utility classes ===== */

/* Hobonichi-style pill badges (1 視野に最大 2 色まで) */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-badge);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}
.badge--urgent {
  background: var(--color-danger-bg);
  color: var(--color-danger-fg);
}
.badge--soon {
  background: var(--color-warning-bg);
  color: var(--color-warning-fg);
}
.badge--new {
  background: var(--color-badge-yellow-bg);
  color: var(--color-text-primary);
}
.badge--external {
  background: var(--color-badge-light-blue-bg);
  color: var(--color-info-fg);
}
.badge--success {
  background: var(--color-badge-green-bg);
  color: var(--color-badge-green-fg);
}

/* Universal focus ring (keyboard 操作) */
:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-brand) 35%, transparent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}