/* korean.tools design tokens. Light theme by default. Import theme-dark.css to opt into dark mode.
   Colours are anchored on the public brand (apps/web) and hangul-motion's ink/green. Motion tokens mirror the
   durations and easings hangul-motion uses, so CSS transitions and glyph animations share one rhythm.
   Everything is namespaced --kt-* so apps can adopt gradually next to their own variables. */
:root {
  /* colour: surfaces */
  --kt-paper: #f7f6f0;        /* page background */
  --kt-surface: #fffef9;      /* cards, inputs */
  --kt-surface-2: #edefe5;    /* quiet panels, examples */
  --kt-line: #d7ddcf;         /* hairlines, borders */
  /* colour: text */
  --kt-ink: #22382d;
  --kt-muted: #59655b;
  /* colour: brand and states */
  --kt-brand: #2d563c;        /* primary actions, links, progress */
  --kt-brand-hover: #1e412b;
  --kt-on-brand: #fffef9;     /* text on brand */
  --kt-brand-soft: #e4ecd8;   /* selected, pills, soft notes */
  --kt-lime: #dbe8bc;         /* highlight */
  --kt-peach: #f0dac8;        /* warm highlight */
  --kt-good: #2f7a47;
  --kt-good-soft: #e2f0e3;
  --kt-warn: #a75a2c;         /* errors to fix, focus ring */
  --kt-warn-soft: #f5e6da;
  --kt-star: #c98a1e;         /* ratings, "missing" jamo */
  --kt-focus: #a75a2c;
  /* hangul-motion theme (resolve with ui.js hmTheme()) */
  --kt-hm-ink: var(--kt-ink);
  --kt-hm-ok: var(--kt-good);
  --kt-hm-bad: var(--kt-warn);
  --kt-hm-missing: var(--kt-star);
  --kt-hm-accent: var(--kt-brand);
  --kt-hm-accent2: var(--kt-warn);
  --kt-hm-ghost: var(--kt-line);

  /* type: fonts.css provides self-hosted, unicode-ranged Noto KR faces; these stacks still degrade cleanly without it. */
  --kt-font-sans: "Noto Sans KR", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", sans-serif;
  --kt-font-display: "Noto Serif KR", "AppleMyungjo", "Nanum Myeongjo", Georgia, serif;
  --kt-font-latin-serif: Georgia, "Times New Roman", serif;
  --kt-text-xs: .75rem;
  --kt-text-sm: .875rem;
  --kt-text-base: 1rem;
  --kt-text-lg: 1.125rem;
  --kt-text-xl: 1.45rem;      /* Korean sentences */
  --kt-text-2xl: 1.9rem;
  --kt-text-3xl: 2.6rem;      /* hero words */
  --kt-leading: 1.55;
  --kt-leading-ko: 1.7;       /* Hangul needs more air */

  /* space, shape, depth */
  --kt-space-1: 4px; --kt-space-2: 8px; --kt-space-3: 12px; --kt-space-4: 16px;
  --kt-space-5: 24px; --kt-space-6: 32px; --kt-space-7: 48px; --kt-space-8: 64px;
  --kt-gutter: 16px;          /* phone side gutter */
  --kt-measure: 760px;        /* comfortable reading width for app pages */
  --kt-radius-sm: 6px; --kt-radius-md: 10px; --kt-radius-lg: 14px; --kt-radius-pill: 999px;
  --kt-shadow-1: 0 1px 2px rgba(34, 56, 45, .05), 0 6px 20px rgba(34, 56, 45, .06);
  --kt-tap: 44px;             /* minimum touch target */

  /* motion (hangul-motion: diff hold .8s, fades .2-.5s, glyph travel ~.9s, stagger .32s) */
  --kt-dur-instant: 80ms;
  --kt-dur-fast: 200ms;
  --kt-dur-base: 400ms;
  --kt-dur-slow: 600ms;
  --kt-dur-travel: 900ms;
  --kt-stagger: 320ms;
  --kt-ease-move: cubic-bezier(.65, 0, .35, 1);     /* ease.inOutCubic: things travelling */
  --kt-ease-out: cubic-bezier(.5, 1, .89, 1);       /* ease.outQuad: lifts, fades in */
  --kt-ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* ease.outBack: settling, "pop" */
  --kt-ease-expo: cubic-bezier(.16, 1, .3, 1);      /* ease.outExpo: reveals */
}
@media (prefers-reduced-motion: reduce) {
  :root { --kt-dur-instant: 1ms; --kt-dur-fast: 1ms; --kt-dur-base: 1ms; --kt-dur-slow: 1ms; --kt-dur-travel: 1ms; --kt-stagger: 0ms; }
}