/* qoop UI Design Tokens
 * Spec: docs/superpowers/specs/2026-04-18-ui-readability-design.md §3
 */

:root {
  /* ── Typography ── */
  --font-family-text:    "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", system-ui, -apple-system, sans-serif;
  --font-family-display: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", system-ui, -apple-system, sans-serif;
  --font-family-mono:    "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Monaco, monospace;

  --font-size-display:  clamp(1.75rem, 2.2vw, 2.125rem);
  --font-size-headline: 1.5rem;
  --font-size-title-l:  1.25rem;
  --font-size-title:    1.125rem;
  --font-size-body-l:   1.0625rem;
  --font-size-body:     1rem;
  --font-size-caption:  0.875rem;
  --font-size-footnote: 0.8125rem;

  --line-height-tight: 1.35;
  --line-height-base:  1.7;
  --letter-spacing-ja: 0.02em;

  /* ── Brand (Deep Navy) ── */
  --color-brand-900: #0B1E3F;
  --color-brand-700: #1A3D7C;
  --color-brand-600: #2B5BA0;
  --color-brand-500: #3B73C2;
  --color-brand-100: #E6ECF5;
  --color-brand-050: #F4F7FC;

  /* ── Text (AA 準拠) ── */
  --color-text-primary:   #1A2332;
  --color-text-secondary: #4A5568;
  --color-text-tertiary:  #64707D;
  --color-text-disabled:  #94A0AE;
  --color-text-on-accent: #FFFFFF;

  /* ── Background / Separator ── */
  --color-bg-primary:   #FFFFFF;
  --color-bg-secondary: #F6F8FB;
  --color-bg-tertiary:  #EEF2F7;
  --color-separator:    #D7DEE7;

  /* ── Semantic (彩度を落とした教育系) ── */
  --color-correct:   #2F8F5D;
  --color-incorrect: #C0392B;
  --color-partial:   #C77700;
  --color-info:      #2B5BA0;
  --color-warning:   #B8860B;

  /* ── Spacing (8px base) ── */
  --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: 48px;

  /* ── Radius ── */
  --radius-xs: 4px;  --radius-sm: 6px;  --radius-md: 10px;
  --radius-lg: 14px; --radius-xl: 18px; --radius-2xl: 22px; --radius-full: 980px;

  /* ── Shadow ── */
  --shadow-sm:    0 1px 2px rgba(13,30,63,0.06), 0 0 0 1px rgba(13,30,63,0.04);
  --shadow-md:    0 4px 12px rgba(13,30,63,0.08);
  --shadow-lg:    0 12px 28px rgba(13,30,63,0.10);
  --shadow-xl:    0 24px 48px rgba(13,30,63,0.14);
  --shadow-focus: 0 0 0 3px rgba(59,115,194,0.35);

  /* ── Motion ── */
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;
  --duration-reveal: 600ms;
  --ease-out:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* ── Layout ── */
  --sidebar-width: 272px;
  --header-height: 56px;
  --z-sidebar: 200;
  --z-header:  220;
  --z-toast:   600;
  --z-overlay: 9999;

  /* ── Shadow semantic aliases ── */
  --shadow-card:     var(--shadow-md);
  --shadow-elevated: var(--shadow-lg);
  --shadow-modal:    var(--shadow-xl);
  --radius-card:     var(--radius-md);
}