@charset "UTF-8";

/* H2수학 Design Tokens v1 — canonical values; policy: docs/design-policy.md */
:root {
  color-scheme: light;

  /* Brand primitives */
  --navy-950: #061630;
  --navy-900: #0b2044;
  --navy-800: #17365c;
  --navy-100: #e8edf5;
  --navy-50: #f1f4f9;
  --crimson-800: #86162f;
  --crimson-700: #a51c3b;
  --crimson-100: #f8e9ed;
  --neutral-0: #ffffff;
  --neutral-50: #f7f7f5;
  --neutral-100: #f0f1f3;
  --neutral-200: #dfe3e9;
  --neutral-400: #8994a6;
  --neutral-600: #5d687b;
  --neutral-800: #303c50;

  /* Semantic colors: use these in components. */
  --color-canvas: var(--neutral-50);
  --color-surface: var(--neutral-0);
  --color-surface-subtle: var(--navy-50);
  --color-text: var(--navy-900);
  --color-text-body: var(--neutral-800);
  --color-text-muted: var(--neutral-600);
  --color-text-inverse: var(--neutral-0);
  --color-text-on-dark: #c3cee0;
  --color-border: var(--neutral-200);
  --color-border-strong: var(--neutral-400);
  --color-border-on-dark: #344561;
  --color-brand: var(--navy-900);
  --color-brand-deep: var(--navy-950);
  --color-brand-hover: var(--navy-800);
  --color-action: var(--crimson-700);
  --color-action-hover: var(--crimson-800);
  --color-action-subtle: var(--crimson-100);
  --color-link: var(--navy-800);
  --color-selected: var(--navy-100);
  --color-focus: #386dcc;
  --color-success: #246347;
  --color-success-subtle: #edf5ef;
  --color-warning: #85570c;
  --color-warning-subtle: #fff5df;
  --color-danger: #b12630;
  --color-danger-subtle: #fff0ee;

  /* Type: local system fonts; no third-party font request. */
  --font-sans: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-editorial: Georgia, "Times New Roman", serif;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-md: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-display: clamp(2rem, 3.8vw, 3.5rem);
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;
  --leading-tight: 1.25;
  --leading-heading: 1.4;
  --leading-body: 1.7;
  --tracking-heading: -0.04em;
  --tracking-label: 0.14em;

  /* 4px spacing grid */
  --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;
  --space-20: 5rem;
  --space-24: 6rem;

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 999px;
  --shadow-card: 0 4px 20px rgb(6 22 48 / 4%);
  --shadow-raised: 0 16px 48px rgb(6 22 48 / 8%);
  --border-width: 1px;
  --control-height: 3rem;
  --target-min: 2.75rem;
  --layout-sidebar: 16rem;
  --layout-content: 90rem;
  --layout-public: 75rem;
  --layout-form: 49rem;
  --duration-fast: 160ms;
  --ease-standard: ease-out;
  --z-navigation: 10;
  --z-skip: 100;
}