/* ============================================================================
   SATO 0024 / K-LA — design tokens + base
   Imported from the Claude Design project. The design system ships these as
   tokens/*.css behind @import; collapsed here into one file so ui_kits/ is
   portable and opens with no build step.
   Source of truth for values: ../readme.md (VISUAL FOUNDATIONS).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;900&family=Archivo+Black&family=Space+Mono:wght@400;700&family=Noto+Sans+KR:wght@700;900&display=swap');

:root {
  /* ---- four inks, full strength, never tinted / faded / gradient-blended ---- */
  --red: #ff3b0f;      /* attention / error / poster lettering */
  --blue: #3d82e8;     /* structural slabs */
  --magenta: #f0129e;  /* the interaction accent */
  --green: #16b54b;    /* signal only (on / success) */

  /* ---- ground ---- */
  --surface-page: #dcdcde; /* flat page grey, every screen */
  --paper: #ffffff;        /* cards, inputs */
  --ink: #0a0a0a;          /* near-black; inverted panels */
  --border-color: var(--ink);
  --text-muted: #63636a;
  --focus-ring: var(--blue);

  /* ---- neutrals (placeholder fields, hairlines) ---- */
  --gray-100: #ededee;
  --gray-300: #c7c7ca;
  --gray-400: #a9a9ae;

  /* ---- type families (substituted — see readme "Font substitutions") ---- */
  --font-display: 'Archivo Black', 'Archivo', system-ui, sans-serif;
  --font-sans: 'Archivo', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-jp: 'Noto Sans KR', 'Noto Sans JP', system-ui, sans-serif;

  /* ---- type scale ---- */
  --weight-display: 900;
  --weight-regular: 400;
  --ls-display: -0.03em;
  --ls-label: 0.01em;
  --ls-mono: 0.06em;
  --ls-mono-wide: 0.16em;
  --lh-display: 0.82;
  --lh-mono: 1.55;
  --type-display-1: clamp(58px, 11vw, 168px);
  --type-display-2: clamp(44px, 7.2vw, 108px);
  --type-mono: 14px;
  --type-mono-sm: 12px;
  --type-mono-xs: 10px;
  --measure: 46ch;

  /* ---- spacing — fixed 32px gutter frame, 8px scale ---- */
  --gutter: 32px;
  --header-h: 72px;                                   /* fixed corner-furniture header */
  --pad-top: calc(var(--header-h) + var(--space-7));  /* top clearance for every screen */
  --work-ratio: 16 / 10;                              /* work-page mockup frame — 16/10 desktop · swap to 16/9 or 4/3 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- borders — always solid, always ink ---- */
  --border-hair: 1px;
  --border-1: 2px;
  --border-2: 3px; /* the default */
  --border-3: 5px;

  /* ---- shadows — hard offset only, zero blur, zero alpha ---- */
  --shadow-hard-sm: 3px 3px 0 var(--ink);
  --shadow-hard: 6px 6px 0 var(--ink);
  --shadow-hard-lg: 10px 10px 0 var(--ink);
  --shadow-hard-accent: 6px 6px 0 var(--magenta); /* one hero moment per page */

  /* ---- motion — minimal, mechanical ---- */
  --dur-fast: 130ms;
  --dur-base: 130ms;   /* hover / press transforms + shadows */
  --dur-color: 80ms;   /* colour swaps — colour never eases */
  --ease-snap: cubic-bezier(.2, 0, 0, 1);
  --lift: translate(-2px, -2px);

  /* ---- rotation — nothing is perfectly level ---- */
  --tilt-sm: -1.5deg;
  --tilt-alt: 2.5deg;
  --tilt-neg: -3deg;

  color-scheme: light;
}

:root[data-theme='dark'] {
  --surface-page: #0a0a0a;
  --paper: #151515;
  --ink: #f3f3f0;
  --border-color: var(--ink);
  --text-muted: #9a9aa0;
  --gray-100: #202021;
  --gray-300: #303032;
  --gray-400: #45454a;
  color-scheme: dark;
}

/* ---- base ------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
  border-radius: 0 !important; /* radius is 0 everywhere. no exceptions. */
}

html,
body { min-height: 100%; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--ink);
  font: var(--weight-regular) var(--type-mono) / var(--lh-mono) var(--font-mono);
  letter-spacing: var(--ls-mono);
  -webkit-font-smoothing: antialiased;
  transition: background var(--dur-color) linear, color var(--dur-color) linear;
}

::selection { background: var(--magenta); color: #fff; }

a { color: inherit; text-underline-offset: 3px; }

img { max-width: 100%; display: block; }

button { font-family: inherit; }

:focus-visible { outline: var(--border-2) solid var(--focus-ring); outline-offset: 2px; }

[data-cursor] { cursor: pointer; }

.ds-noscroll { scrollbar-width: none; -ms-overflow-style: none; }
.ds-noscroll::-webkit-scrollbar { width: 0; height: 0; display: none; }