:root {
  /* Colors - DESIGN V2.1 */
  --canvas: #F7F8F6;
  --surface: #FFFFFF;
  --text-primary: #202725;
  --text-secondary: #59635F;
  --brand-primary: #214E49;
  --brand-hover: #173D39;
  --brand-accent: #356E65;
  --surface-tint: #EDF2EF;
  --border-subtle: #DCE3DE;
  --border-control: #778780;
  --state-success: #246647;
  --state-warning: #805D18;
  --state-error: #AD3048;

  /* Layout */
  --page-bg: var(--canvas);
  --sheet-width: 1240px;
  --gutter: 40px;

  /* Radius & Shadows */
  --radius-control: 8px;
  --radius-card: 12px;
  --radius-badge: 5px;
  --shadow: 0 0 0 transparent;
  --shadow-soft: 0 8px 24px rgba(32, 39, 37, 0.06);

  /* Typography */
  --font-sans: Inter, "Noto Sans SC", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Motion */
  --ease: cubic-bezier(.2, .65, .3, 1);
  --quick: 160ms;
  --reveal: 220ms;

  /* Image placeholder block */
  --placeholder: #E3E7E4;
  --placeholder-border: #D5DBD6;

  /* Spacing Scale */
  --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;
  --space-16: 64px;
  --space-20: 80px;

  /* Legacy compatibility aliases */
  --font-body: var(--font-sans);
  --color-ink: var(--text-primary);
  --color-background: var(--canvas);
  --color-focus: var(--brand-accent);
  --space-section: var(--space-8);
}

@media (max-width: 1150px) {
  :root {
    --gutter: 32px;
  }
}

@media (max-width: 800px) {
  :root {
    --gutter: 24px;
  }
}

@media (max-width: 480px) {
  :root {
    --gutter: 20px;
  }
}

@media (max-width: 359px) {
  :root {
    --gutter: 16px;
  }
}