:root {
  --font-size-body: clamp(0.9375rem, 0.8375rem + 0.51vw, 1.0625rem);
  --font-size-sm: clamp(0.75rem, 0.6641rem + 0.39vw, 0.9375rem);
  --font-size-lg: clamp(1.3125rem, 1.1615rem + 0.67vw, 1.6875rem);
  --font-size-xl: clamp(1.75rem, 1.3889rem + 1.59vw, 2.5rem);
  --font-size-2xl: clamp(2.25rem, 1.7222rem + 2.39vw, 3.375rem);

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;

  --line-height-tight: 1.15;
  --line-height-normal: 1.5;
  --line-height-loose: 1.65;

  --gap-xs: 0.375rem;
  --gap-sm: 0.75rem;
  --gap-md: 1.25rem;
  --gap-lg: 2rem;
  --gap-xl: 3rem;
  --gap-section: 1.5rem;
  --gap-screen: 1.25rem;

  /* Date navigation */
  --date-nav-size: 2.75rem;
  --date-nav-bg: rgba(59, 130, 246, 0.10);
  --date-nav-bg-hover: rgba(59, 130, 246, 0.18);
  --date-nav-color: var(--color-blue);

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  --color-blue: #3b82f6;
  --color-blue-hover: #2563eb;
  --color-blue-bright: #60a5fa;     /* より明るい青 */
  --color-green: #22c55e;
  --color-red: #ef4444;
  --color-amber: #f59e0b;
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.10), 0 8px 16px rgba(0, 0, 0, 0.06);

  --material-light: rgba(255, 255, 255, 0.72);
  --material-light-strong: rgba(255, 255, 255, 0.88);
  --material-border: rgba(255, 255, 255, 0.48);
  --material-hover: rgba(255, 255, 255, 0.24);

  --blur-sm: blur(4px);
  --blur-md: blur(12px);
  --blur-lg: blur(20px);
  --blur-xl: blur(28px);

  --transition-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-snappy: cubic-bezier(0.4, 0, 0.2, 1);

  --font-family-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif;
  --font-family-mono: ui-monospace, 'SF Mono', 'Monaco', 'Menlo', monospace;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}

/* ─── LIGHT THEME (explicit) ─── */
:root,
[data-theme="light"] {
  --material-light: rgba(255, 255, 255, 0.72);
  --material-light-strong: rgba(255, 255, 255, 0.88);
  --material-border: rgba(0, 0, 0, 0.08);
  --material-hover: rgba(0, 0, 0, 0.04);

  --color-bg: #f8fafc;
  --color-bg-elevated: #ffffff;
  --color-text: var(--color-slate-800);
  --color-text-secondary: var(--color-slate-500);
  --color-surface: rgba(255, 255, 255, 0.32);
  --color-surface-strong: rgba(255, 255, 255, 0.72);

  /* Unified surface background for all cards */
  --surface-elevated-bg: #ffffff;
  --surface-elevated-border: rgba(0, 0, 0, 0.08);
  --surface-bg: var(--surface-elevated-bg);
  --surface-border: var(--surface-elevated-border);
}

/* ─── DARK THEME (default) ─── */
[data-theme="dark"] {
  --material-light: rgba(255, 255, 255, 0.08);
  --material-light-strong: rgba(255, 255, 255, 0.18);   /* was 0.12, elevated card bg */
  --material-border: rgba(255, 255, 255, 0.20);         /* was 0.12 */
  --material-hover: rgba(255, 255, 255, 0.10);           /* was 0.04 */

  --color-bg: var(--color-slate-50);
  --color-bg-elevated: var(--color-slate-100);
  --color-text: var(--color-slate-800);
  --color-text-secondary: var(--color-slate-500);
  --color-surface: rgba(255, 255, 255, 0.06);
  --color-surface-strong: rgba(255, 255, 255, 0.14);    /* was 0.10 */

  --color-slate-50: #0f172a;
  --color-slate-100: #1e293b;
  --color-slate-200: #334155;
  --color-slate-300: #475569;
  --color-slate-400: #64748b;
  --color-slate-500: #94a3b8;
  --color-slate-600: #94a3b8;
  --color-slate-700: #cbd5e1;
  --color-slate-800: #e2e8f0;
  --color-slate-900: #f8fafc;

  /* Unified surface background for all cards */
  --surface-elevated-bg: rgba(25, 35, 55, 0.50);
  --surface-elevated-border: rgba(255, 255, 255, 0.10);
  --surface-bg: var(--surface-elevated-bg);
  --surface-border: var(--surface-elevated-border);
}

/* ─── FALLBACK: prefers-color-scheme dark (when data-theme not set) ─── */
  @media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --material-light: rgba(255, 255, 255, 0.10);
    --material-light-strong: rgba(255, 255, 255, 0.16);
    --material-border: rgba(255, 255, 255, 0.16);
    --material-hover: rgba(255, 255, 255, 0.08);
    --color-bg: var(--color-slate-50);
    --color-bg-elevated: var(--color-slate-100);
    --color-text: var(--color-slate-800);
    --color-text-secondary: var(--color-slate-500);
    --color-slate-50: #0f172a;
    --color-slate-100: #1e293b;
    --color-slate-200: #334155;
    --color-slate-500: #64748b;
    --color-slate-800: #e2e8f0;
    --color-slate-900: #f8fafc;

    /* Unified surface background */
    --surface-elevated-bg: rgba(25, 35, 55, 0.50);
    --surface-elevated-border: rgba(255, 255, 255, 0.10);
    --surface-bg: var(--surface-elevated-bg);
    --surface-border: var(--surface-elevated-border);
  }
}

@media (prefers-reduced-transparency: reduce) {
  [data-theme="light"],
  :root:not([data-theme]) {
    --material-light: rgba(255, 255, 255, 0.92);
    --material-light-strong: #ffffff;
    --material-border: rgba(0, 0, 0, 0.08);
  }
}

@media (prefers-color-scheme: dark) {
  @media (prefers-reduced-transparency: reduce) {
    [data-theme="dark"],
    :root:not([data-theme]) {
      --material-light: rgba(248, 250, 252, 0.92);
      --material-light-strong: #f8fafc;
      --material-border: rgba(255, 255, 255, 0.08);
    }
  }
}