/*
  TWENTYOZ · precision-spatial token source of truth
  One grotesk, one semantic signal, square DOM geometry. Curves belong to the core.
*/

@font-face {
  font-family: "Pretendard Variable";
  font-style: normal;
  font-weight: 45 920;
  font-display: swap;
  src: url("../assets/pretendard-twentyoz.woff2") format("woff2-variations");
}

:root {
  color-scheme: light dark;

  /* Type */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-body: clamp(1.0625rem, 1.02rem + 0.16vw, 1.125rem);
  --text-lead: clamp(1.125rem, 1.02rem + 0.38vw, 1.3125rem);
  --text-h3: clamp(1.5rem, 1.25rem + 0.75vw, 1.875rem);
  --text-h2: clamp(2rem, 1.75rem + 0.8vw, 2.5rem);
  --text-display: clamp(2rem, 1.36rem + 2.7vw, 4.5rem);
  --leading-tight: 1.04;
  --leading-heading: 1.15;
  --leading-body: 1.7;
  --tracking-display: -0.018em;
  --tracking-heading: -0.012em;
  --tracking-label: 0.08em;
  --measure: 36rem;
  --measure-narrow: 28rem;

  /* Light theme */
  --page: #e9e7e2;
  --surface: #f6f4ef;
  --surface-muted: #d5d1ca;
  --surface-quiet: #dfdcd6;
  --ink: #151616;
  --ink-muted: #5a5954;
  --ink-soft: #6a6862;
  --line: #b8b5ae;
  --line-strong: #74736e;
  --signal: #b9362b;
  --signal-strong: #8f251d;
  --signal-ink: #fff8f0;
  --selection: #d9aaa1;
  --focus: #8f251d;

  /* Inverse surface */
  --inverse: #111313;
  --inverse-raised: #1a1d1c;
  --inverse-ink: #f2f1ec;
  --inverse-muted: #b4b5b0;
  --inverse-line: #414442;
  --inverse-signal: #ed6a58;
  --inverse-signal-ink: #180b08;

  /* 3D material roles */
  --core-metal: #c9c6be;
  --core-metal-dark: #343534;
  --core-glass: #8c9898;
  --core-spectrum: #4f7d88;
  --core-shadow: #232423;
  --core-light: #fffdf6;
  --core-scrim: linear-gradient(90deg, #e9e7e2 0%, #e9e7e2e8 26%, #e9e7e200 58%);
  --core-vignette: radial-gradient(circle at 74% 44%, #ffffff00 30%, #15161614 100%);
  --shadow-core: 0 2rem 5rem #15161624;

  /* Space · grid */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1.25rem;
  --space-5: 2rem;
  --space-6: 3.5rem;
  --space-7: 6rem;
  --space-8: clamp(6rem, 4rem + 7vw, 10rem);
  --space-9: clamp(8rem, 5rem + 10vw, 13rem);
  --page-pad: clamp(1.25rem, 0.7rem + 2.4vw, 4rem);
  --wide: 90rem;
  --content: 75rem;
  --header-h: 4.5rem;
  --control-min: 2.75rem;
  --hairline: 1px;
  --focus-width: 2px;
  --radius: 0px;

  /* Motion */
  --dur-instant: 120ms;
  --dur-quick: 220ms;
  --dur-normal: 420ms;
  --dur-slow: 760ms;
  --ease-out: cubic-bezier(0.22, 0.75, 0.16, 1);
  --ease-in: cubic-bezier(0.55, 0.08, 0.68, 0.53);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --shift-sm: 0.5rem;
  --shift-lg: 1.5rem;
  --stagger: 60ms;
}

/* 초광폭에서는 현장 선택기와 기록 표가 지나치게 중앙에 몰리지 않게 한다.
   카피와 코어의 별도 폭 제한은 유지한다. */
@media (min-width: 120rem) {
  :root {
    --wide: 96rem;
  }
}

@media (min-width: 150rem) {
  :root {
    --wide: 102rem;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #0d0f0f;
    --surface: #171a1a;
    --surface-muted: #2c302f;
    --surface-quiet: #202423;
    --ink: #f1f0eb;
    --ink-muted: #b8bab6;
    --ink-soft: #a8aaa7;
    --line: #3b3e3d;
    --line-strong: #6e7270;
    --signal: #d99a38;
    --signal-strong: #f0b454;
    --signal-ink: #15120c;
    --selection: #654a27;
    --focus: #f0b454;

    --inverse: #edeae4;
    --inverse-raised: #f6f4ef;
    --inverse-ink: #171817;
    --inverse-muted: #5b5b57;
    --inverse-line: #b9b5ae;
    --inverse-signal: #a92f25;
    --inverse-signal-ink: #fff8f0;

    --core-metal: #555b5b;
    --core-metal-dark: #090b0b;
    --core-glass: #838d8b;
    --core-spectrum: #7fb8c3;
    --core-shadow: #030404;
    --core-light: #f5ead3;
    --core-scrim: linear-gradient(90deg, #0d0f0f 0%, #0d0f0fe8 26%, #0d0f0f00 58%);
    --core-vignette: radial-gradient(circle at 74% 44%, #00000000 30%, #0000005c 100%);
    --shadow-core: 0 2rem 5rem #00000066;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --shift-sm: 0px;
    --shift-lg: 0px;
    --stagger: 0ms;
    --dur-normal: var(--dur-instant);
    --dur-slow: var(--dur-instant);
    --ease-out: ease-out;
    --ease-in: ease-out;
    --ease-soft: ease-out;
  }
}