:root {
  /* Color roles */
  --color-primary: var(--primary-color, #72c393);
  --color-secondary: var(--dark-accent-color, #2e7d62);
  --color-brand: var(--color-primary);
  --color-brand-strong: var(--color-secondary);
  --color-background: var(--bg, #f6fffa);
  --color-surface: var(--surface, #fff);
  --color-surface-muted: var(--surface-2, #f8faf9);
  --color-text: var(--text, #333);
  --color-text-muted: var(--muted, #667085);
  --color-text-inverse: #fff;
  --color-border: var(--border, #d2d8df);
  --color-success: var(--ok, #3ddc97);
  --color-warning: var(--warn, #ffcc66);
  --color-error: var(--danger, #e55353);
  --color-info: var(--brand, #4f8cff);
  --color-disabled-bg: #eef4f1;
  --color-disabled-text: #667085;
  --color-neutral: var(--neutral-text-color, #333);
  --color-neutral-50: #f8faf9;
  --color-neutral-100: #eef4f1;
  --color-neutral-200: #d8e2dd;
  --color-neutral-700: #344054;
  --color-neutral-900: #101828;

  /* Typography roles */
  --font-family-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-weight-regular: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  --line-height-tight: 1.2;
  --line-height-base: 1.6;
  --line-height-relaxed: 1.7;
  --letter-spacing-base: 0;
  --letter-spacing-eyebrow: 0.08em;

  /* Spacing scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Radius roles */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-pill: 999px;

  /* Shadow roles */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: var(--shadow, 0 8px 24px rgba(0, 0, 0, 0.12));
  --shadow-lg: 0 18px 42px rgba(16, 24, 40, 0.12);

  /* Layout roles */
  --layout-content-max-width: var(--w, 1100px);
  --layout-workspace-max-width: 1200px;
  --layout-header-height: 4.75rem;
  --breakpoint-mobile: 640px;
  --breakpoint-tablet: 860px;
  --breakpoint-desktop: 980px;

  /* Motion roles */
  --motion-duration-fast: 120ms;
  --motion-duration-base: 180ms;
  --motion-duration-slow: 260ms;
  --motion-easing-standard: ease;
  --motion-easing-emphasized: ease-out;
  --motion-fast: var(--motion-duration-fast) var(--motion-easing-standard);
  --motion-base: var(--motion-duration-base) var(--motion-easing-standard);

  /* Compatibility aliases for existing CSS. */
  --content-max-width: var(--layout-content-max-width);
  --workspace-max-width: var(--layout-workspace-max-width);
  --header-height: var(--layout-header-height);
}

*:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.sr-only {
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.skip-link {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  left: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  position: absolute;
  top: var(--space-md);
  transform: translateY(-200%);
  z-index: 1000;
}

.skip-link:focus-visible {
  transform: translateY(0);
}