/* ============================================================
   AppLibrary Design Tokens
   liquid-glass.css から移植・整理した標準トークン
   すべてのページ（共通・個別）で読み込む
   ============================================================ */

:root {
  /* --- Spacing --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 56px;

  /* --- Radius --- */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;

  /* --- Font --- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Liquid Glass --- */
  --glass-blur: 22px;
  --glass-blur-sm: 14px;
  --glass-tint: rgba(255, 255, 255, 0.08);
  --glass-tint-md: rgba(255, 255, 255, 0.12);
  --glass-tint-hover: rgba(255, 255, 255, 0.18);
  --glass-border: rgba(255, 255, 255, 0.4);
  --glass-border-dim: rgba(255, 255, 255, 0.2);
  --glass-border-bright: rgba(255, 255, 255, 0.6);
  --glass-glow: 0 0 16px -6px rgba(255, 255, 255, 0.25);
  --glass-glow-lg: 0 0 24px -6px rgba(255, 255, 255, 0.35);
  --glass-inset: inset 0 0 10px -3px rgba(255, 255, 255, 0.6);
  --glass-accent: rgba(0, 122, 255, 0.4);
  --glass-text: #ffffff;
  --glass-text-dim: rgba(255, 255, 255, 0.7);
  --glass-text-faint: rgba(255, 255, 255, 0.5);
  --glass-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);

  /* --- Shadow --- */
  --shadow-out:    0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-out-sm: 0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-out-lg: 0 8px 40px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-in:     inset 0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-in-sm:  inset 0 1px 3px rgba(0, 0, 0, 0.06);

  /* --- Semantic Color --- */
  --accent: #007AFF;
  --accent-hover: #0a84ff;
  --success: #30D158;
  --danger:  #FF453A;
  --warning: #FFD60A;
  --info:    #5AC8FA;

  /* --- Utility Palette --- */
  --purple: #BF5AF2;
  --pink:   #FF6482;
  --orange: #FF9F0A;
  --teal:   #64D2B1;
  --indigo: #5856D6;

  /* --- Tweakable runtime tokens (top page) --- */
  --card-pad: 22px;
  --font-serif: 'Iowan Old Style', Palatino, 'Hiragino Mincho ProN', 'Yu Mincho', Georgia, serif;
  --font-stack: var(--font-sans);

  /* --- Hero opening animation --- */
  --hero-anim-duration: 0.5s;
  --hero-letter-duration: 0.4s;
  --hero-anim-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
  --hero-letter-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --hero-letter-base: 150ms;
  --hero-letter-stagger: 24ms;
}

/* --- Tweaks: density / font (top page only) --- */
[data-density="tight"]    { --card-pad: 16px; }
[data-density="relaxed"]  { --card-pad: 22px; }
[data-density="spacious"] { --card-pad: 30px; }
[data-font="sans"]  { --font-stack: var(--font-sans); }
[data-font="serif"] { --font-stack: var(--font-serif); }
[data-font="mono"]  { --font-stack: var(--font-mono); }

/* --- Light theme override (top page only — sub-pages are self-contained) --- */
[data-theme="light"] {
  --glass-text:        #1d1d1f;
  --glass-text-dim:    rgba(29, 29, 31, 0.7);
  --glass-text-faint:  rgba(29, 29, 31, 0.5);
  --glass-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  --glass-tint:        rgba(255, 255, 255, 0.3);
  --glass-tint-md:     rgba(255, 255, 255, 0.45);
  --glass-tint-hover:  rgba(255, 255, 255, 0.6);
  --glass-border:      rgba(255, 255, 255, 0.7);
  --glass-border-dim:  rgba(255, 255, 255, 0.45);
}