/* ── Design Tokens ─────────────────────────────────────────── */

:root {
  /* ── Colors (Light) ──────────────────────────── */
  --color-bg:            #FAFAF7;
  --color-bg-raised:     #FFFFFF;
  --color-bg-sunken:     #F0F0EB;
  --color-text:          #1A1A1A;
  --color-text-secondary:#5A5A56;
  --color-text-muted:    #8A8A84;
  --color-border:        #E0E0DA;
  --color-border-strong: #C8C8C0;

  --color-accent:        #C45D3E;
  --color-accent-hover:  #A84E34;
  --color-accent-subtle: rgba(196, 93, 62, 0.08);

  --color-translation:   rgba(196, 93, 62, 0.10);
  --color-success:       #3B8C5E;
  --color-success-subtle:rgba(59, 140, 94, 0.12);
  --color-info:          #3B7FC4;
  --color-info-subtle:   rgba(59, 127, 196, 0.10);

  --color-hover-bg:      rgba(0, 0, 0, 0.04);
  --color-shadow:        rgba(0, 0, 0, 0.08);
  --color-shadow-strong: rgba(0, 0, 0, 0.14);

  /* ── Typography ──────────────────────────────── */
  --font-serif:  'Source Serif 4', 'Georgia', serif;
  --font-sans:   'Inter', system-ui, -apple-system, sans-serif;

  --text-xs:     0.75rem;   /* 12px */
  --text-sm:     0.875rem;  /* 14px */
  --text-base:   1rem;      /* 16px */
  --text-lg:     1.125rem;  /* 18px */
  --text-xl:     1.25rem;   /* 20px */
  --text-2xl:    1.5rem;    /* 24px */
  --text-3xl:    2rem;      /* 32px */
  --text-4xl:    2.75rem;   /* 44px */

  --leading-tight:   1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* ── Spacing (8px base) ──────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* ── Radii ───────────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;

  /* ── Transitions ─────────────────────────────── */
  --ease-out:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration-fast:    120ms;
  --duration-normal:  200ms;
  --duration-slow:    300ms;

  /* ── Layout ──────────────────────────────────── */
  --topbar-height:  56px;
  --progress-height: 3px;
  --max-width:      1280px;
  --content-width:  720px;
}

/* ── Dark Theme ────────────────────────────────────────────── */

[data-theme="dark"] {
  --color-bg:            #1A1B1E;
  --color-bg-raised:     #242529;
  --color-bg-sunken:     #131416;
  --color-text:          #E4E2DE;
  --color-text-secondary:#A8A6A0;
  --color-text-muted:    #6E6D68;
  --color-border:        #333338;
  --color-border-strong: #48484E;

  --color-accent:        #E07A5A;
  --color-accent-hover:  #EB9070;
  --color-accent-subtle: rgba(224, 122, 90, 0.12);

  --color-translation:   rgba(224, 122, 90, 0.12);
  --color-success:       #5CB87A;
  --color-success-subtle:rgba(92, 184, 122, 0.12);
  --color-info:          #5A9FE0;
  --color-info-subtle:   rgba(90, 159, 224, 0.12);

  --color-hover-bg:      rgba(255, 255, 255, 0.06);
  --color-shadow:        rgba(0, 0, 0, 0.24);
  --color-shadow-strong: rgba(0, 0, 0, 0.40);
}