/*
 * Jeongdo Design System — foundations
 * Primitive tokens are private implementation details. Product code should use
 * semantic tokens (surface, text, border, action, status) whenever possible.
 */
:root {
  color-scheme: light;

  /* Primitive palette: paper, drafting ink, blueprint and brass. */
  --jd-paper-0: #ffffff;
  --jd-paper-50: #fbfbf8;
  --jd-paper-100: #f5f5f0;
  --jd-paper-200: #ecece5;
  --jd-ink-950: #171a1d;
  --jd-ink-800: #30363b;
  --jd-ink-600: #5f686f;
  --jd-ink-400: #92999e;
  --jd-blue-700: #174f78;
  --jd-blue-600: #22658f;
  --jd-blue-100: #eaf3f8;
  --jd-brass-700: #8c641d;
  --jd-brass-100: #fbf2dc;
  --jd-green-700: #28734d;
  --jd-green-100: #e8f5ed;
  --jd-red-700: #b13a34;
  --jd-red-100: #fbeceb;

  /* Semantic color tokens. */
  --color-surface-canvas: var(--jd-paper-50);
  --color-surface-default: var(--jd-paper-0);
  --color-surface-subtle: var(--jd-paper-100);
  --color-surface-inverse: var(--jd-ink-950);
  --color-text-primary: var(--jd-ink-950);
  --color-text-secondary: var(--jd-ink-600);
  --color-text-disabled: var(--jd-ink-400);
  --color-text-inverse: var(--jd-paper-0);
  --color-border-subtle: var(--jd-paper-200);
  --color-border-default: #d9dad4;
  --color-border-strong: var(--jd-ink-600);
  --color-action-primary: var(--jd-ink-950);
  --color-action-primary-hover: var(--jd-ink-800);
  --color-action-focus: var(--jd-blue-600);
  --color-info: var(--jd-blue-700);
  --color-info-subtle: var(--jd-blue-100);
  --color-success: var(--jd-green-700);
  --color-success-subtle: var(--jd-green-100);
  --color-warning: var(--jd-brass-700);
  --color-warning-subtle: var(--jd-brass-100);
  --color-danger: var(--jd-red-700);
  --color-danger-subtle: var(--jd-red-100);
  --color-info-border: #bfd9e7;
  --color-success-border: #badfc8;
  --color-warning-border: #ead39d;
  --color-danger-border: #efc0bd;
  --color-surface-hover: #f1f3f4;
  --color-surface-selected: #e8f0fe;
  --color-overlay: rgba(23, 26, 29, 0.68);
  --color-overlay-strong: rgba(23, 26, 29, 0.92);
  --color-chart-revenue: #2f8f60;
  --color-chart-expense: #c66b22;
  --color-chart-net: var(--jd-blue-600);
  --color-intensity-low: #65b8d6;
  --color-intensity-medium: #3c8650;
  --color-intensity-high: #c84842;
  --color-plan-highlight: #ffd400;

  /* Typography. */
  --font-family-sans: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-family-data: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8125rem;
  --font-size-md: 0.875rem;
  --font-size-lg: 1rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: clamp(1.5rem, 2vw, 1.875rem);
  --font-size-display: clamp(2rem, 5vw, 3.75rem);
  --line-height-tight: 1.25;
  --line-height-normal: 1.55;
  --font-weight-regular: 400;
  --font-weight-medium: 550;
  --font-weight-semibold: 650;
  --font-weight-bold: 750;

  /* Spacing, shape and elevation. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(23, 26, 29, 0.05);
  --shadow-md: 0 10px 30px rgba(23, 26, 29, 0.08);
  --shadow-dialog: 0 24px 64px rgba(23, 26, 29, 0.2);
  --content-max: 74rem;
  --content-narrow: 42rem;
  --header-height: 4.25rem;
  --breakpoint-mobile: 48rem;
  --motion-fast: 140ms;
  --motion-normal: 220ms;
  --focus-ring: 0 0 0 3px rgba(34, 101, 143, 0.22);

  /* Backwards-compatible aliases for legacy screens. */
  --fg: var(--color-text-primary);
  --fg-mute: var(--color-text-secondary);
  --bg: var(--color-surface-canvas);
  --card: var(--color-surface-default);
  --line: var(--color-border-subtle);
  --accent: var(--color-action-primary);
  --accent-hover: var(--color-action-primary-hover);
  --danger: var(--color-danger);
  --ok: var(--color-success);
  --warn: var(--color-warning);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}