/*
 * 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;

  /* Jjaim approved identity — smoked oak, structure ink, cream and brass. */
  --jjaim-brand-900: #29241f;
  --jjaim-brand-800: #40382f;
  --jjaim-brand-700: #574c3e;
  --jjaim-brand-100: #ece8e1;
  --jjaim-brand-50: #f7f3ec;
  --jjaim-ink: #29241f;
  --jjaim-paper: #f7f3ec;
  --jjaim-brass: #c18a32;
  --jjaim-smoked-oak-700: #574c3e;
  --jjaim-smoked-oak-800: #40382f;
  --jjaim-smoked-oak-900: #29241f;
  --jjaim-smoked-oak-100: #ece8e1;
  --jjaim-oak-mist: #d8d0c4;
  --jjaim-brass-soft: #f3e5c8;
  --jjaim-white: #ffffff;
  --jjaim-neutral-50: #f6f6f6;
  --jjaim-neutral-100: #ededed;
  --jjaim-neutral-200: #d9d9d9;
  --jjaim-neutral-500: #8a8a8a;
  --jjaim-neutral-600: #646464;

  /* Jjaim dark primitives — charcoal timber, not neutral black. */
  --jjaim-dark-canvas: #12100e;
  --jjaim-dark-surface: #1b1815;
  --jjaim-dark-surface-subtle: #24201c;
  --jjaim-dark-surface-selected: #302a24;
  --jjaim-dark-text-primary: #f7f3ec;
  --jjaim-dark-text-secondary: #b9b0a5;
  --jjaim-dark-border-subtle: #3a342e;
  --jjaim-dark-border-strong: #756958;
  --jjaim-dark-action: #d8d0c4;
  --jjaim-dark-action-hover: #f7f3ec;
  --jjaim-dark-logo-upper: #a8957d;
  --jjaim-dark-info: #8bc5e7;
  --jjaim-dark-info-subtle: #172934;
  --jjaim-dark-info-border: #28506a;
  --jjaim-dark-success: #83cca3;
  --jjaim-dark-success-subtle: #17291f;
  --jjaim-dark-success-border: #315a43;
  --jjaim-dark-warning: #e0b75d;
  --jjaim-dark-warning-subtle: #302714;
  --jjaim-dark-warning-border: #6a5425;
  --jjaim-dark-danger: #ef9c95;
  --jjaim-dark-danger-subtle: #321d1b;
  --jjaim-dark-danger-border: #713b37;
  --jjaim-dark-focus-ring: rgba(193, 138, 50, 0.28);

  /* Jjaim semantic aliases — use these in brand-facing surfaces. */
  --jjaim-surface-canvas: var(--jjaim-white);
  --jjaim-surface-default: var(--jjaim-white);
  --jjaim-surface-subtle: var(--jjaim-neutral-50);
  --jjaim-surface-selected: var(--jjaim-neutral-100);
  --jjaim-surface-inverse: var(--jjaim-ink);
  --jjaim-text-primary: var(--jjaim-ink);
  --jjaim-text-secondary: #646464;
  --jjaim-text-inverse: var(--jjaim-white);
  --jjaim-border-subtle: var(--jjaim-neutral-200);
  --jjaim-border-strong: var(--jjaim-brand-700);
  --jjaim-action-primary: var(--jjaim-brand-800);
  --jjaim-action-primary-hover: var(--jjaim-brand-900);
  --jjaim-action-on-primary: var(--jjaim-white);
  --jjaim-action-focus: var(--jjaim-brass);
  --jjaim-accent-joint: var(--jjaim-brass);

  /* Semantic color tokens. */
  --color-surface-canvas: var(--jjaim-white);
  --color-surface-default: var(--jjaim-white);
  --color-surface-subtle: var(--jjaim-neutral-50);
  --color-surface-inverse: var(--jjaim-ink);
  --color-text-primary: var(--jjaim-ink);
  --color-text-secondary: var(--jjaim-neutral-600);
  --color-text-disabled: var(--jjaim-neutral-500);
  --color-text-inverse: var(--jjaim-white);
  --color-border-subtle: var(--jjaim-neutral-200);
  --color-border-default: var(--jjaim-oak-mist);
  --color-border-strong: var(--jjaim-brand-700);
  --color-action-primary: var(--jjaim-brand-800);
  --color-action-primary-hover: var(--jjaim-brand-900);
  --color-action-on-primary: var(--jjaim-white);
  --color-action-focus: var(--jjaim-brass);
  --color-brand-emphasis: var(--jjaim-brand-700);
  --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);
  /* Categorical data visualization palette. Use in stable order, not as status colors. */
  --color-chart-process-1: #8d6e63;
  --color-chart-process-2: #1976d2;
  --color-chart-process-3: #00838f;
  --color-chart-process-4: #26a69a;
  --color-chart-process-5: #f57c00;
  --color-chart-process-6: #f57f17;
  --color-chart-process-7: #7b1fa2;
  --color-chart-process-8: #c2185b;
  --color-chart-process-9: #5e35b1;
  --color-chart-process-10: #6d4c41;
  --color-chart-process-11: #d84315;
  --color-chart-process-12: #00695c;
  --color-chart-process-13: #455a64;
  --color-chart-process-14: #607d8b;
  --color-chart-fallback-1: #e57373;
  --color-chart-fallback-2: #64b5f6;
  --color-chart-fallback-3: #81c784;
  --color-chart-fallback-4: #ffb74d;
  --color-chart-fallback-5: #ba68c8;
  --color-chart-fallback-6: #4db6ac;
  --color-chart-fallback-7: #a1887f;
  --color-chart-fallback-8: #90a4ae;
  --color-chart-fallback-9: #f06292;
  --color-chart-fallback-10: #7986cb;
  --color-chart-unassigned: #90a4ae;
  --color-chart-category-labor: var(--color-chart-fallback-4);
  --color-chart-category-material: var(--color-chart-fallback-2);
  --color-chart-category-construction: var(--color-chart-process-4);
  --color-chart-category-inclusive: var(--color-chart-fallback-5);
  --color-chart-category-other: var(--color-chart-unassigned);
  --color-intensity-low: #65b8d6;
  --color-intensity-medium: #3c8650;
  --color-intensity-high: #c84842;
  --color-plan-highlight: #ffd400;
  --color-header-surface: rgba(255, 255, 255, 0.94);
  --color-overlay-border: rgba(255, 255, 255, 0.35);

  /* 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(193, 138, 50, 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);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-surface-canvas: var(--jjaim-dark-canvas);
  --color-surface-default: var(--jjaim-dark-surface);
  --color-surface-subtle: var(--jjaim-dark-surface-subtle);
  --color-surface-inverse: var(--jjaim-dark-text-primary);
  --color-text-primary: var(--jjaim-dark-text-primary);
  --color-text-secondary: var(--jjaim-dark-text-secondary);
  --color-text-disabled: var(--jjaim-dark-border-strong);
  --color-text-inverse: var(--jjaim-ink);
  --color-border-subtle: var(--jjaim-dark-border-subtle);
  --color-border-default: var(--jjaim-dark-border-strong);
  --color-border-strong: var(--jjaim-dark-text-secondary);
  --color-action-primary: var(--jjaim-dark-action);
  --color-action-primary-hover: var(--jjaim-dark-action-hover);
  --color-action-on-primary: var(--jjaim-ink);
  --color-action-focus: var(--jjaim-brass);
  --color-brand-emphasis: var(--jjaim-dark-logo-upper);
  --color-info: var(--jjaim-dark-info);
  --color-info-subtle: var(--jjaim-dark-info-subtle);
  --color-info-border: var(--jjaim-dark-info-border);
  --color-success: var(--jjaim-dark-success);
  --color-success-subtle: var(--jjaim-dark-success-subtle);
  --color-success-border: var(--jjaim-dark-success-border);
  --color-warning: var(--jjaim-dark-warning);
  --color-warning-subtle: var(--jjaim-dark-warning-subtle);
  --color-warning-border: var(--jjaim-dark-warning-border);
  --color-danger: var(--jjaim-dark-danger);
  --color-danger-subtle: var(--jjaim-dark-danger-subtle);
  --color-danger-border: var(--jjaim-dark-danger-border);
  --color-surface-hover: var(--jjaim-dark-surface-subtle);
  --color-surface-selected: var(--jjaim-dark-surface-selected);
  --color-header-surface: rgba(18, 16, 14, 0.94);
  --color-overlay-border: var(--jjaim-dark-border-strong);
  --focus-ring: 0 0 0 3px var(--jjaim-dark-focus-ring);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.32);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.42);
  --shadow-dialog: 0 24px 64px rgba(0, 0, 0, 0.56);
}

@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;
  }
}