/* ==========================================================================
   Koyomi Days — Design Tokens
   Colors, Motion, Typography & Layout variables
   ========================================================================== */

:root {
  /* Light Theme (default) */
  --kd-bg: #F7F6F2;
  --kd-surface: #FFFFFF;
  --kd-surface-2: #F0EEE8;
  --kd-ink: #22252A;
  --kd-ink-2: #5B5F66;
  --kd-line: #DDDAD2;
  --kd-line-strong: #8A867C;
  --kd-ai: #2E4A6B;
  --kd-on-ai: #FFFFFF;
  --kd-ai-hover: #233A55;
  --kd-ai-tint: #E6ECF3;
  --kd-tokiwa: #2F6B52;
  --kd-kuri: #7A4E2D;
  --kd-attn-bg: #F6EEE6;
  --kd-skeleton: #E9E6DE;

  /* 4 new tokens from 07 §4.3 */
  --kd-tick: #B9B5AB;
  --kd-tick-major: var(--kd-line-strong);
  --kd-cursor: var(--kd-ai);
  --kd-cursor-2: rgba(46, 74, 107, 0.5);

  /* 7 Motion tokens from 07 §7.2 */
  --kd-dur-fast: 120ms;
  --kd-dur: 200ms;
  --kd-dur-open: 240ms;
  --kd-dur-zoom: 300ms;
  --kd-dur-cursor-min: 180ms;
  --kd-dur-cursor-max: 480ms;
  --kd-dur-coin: 700ms;
  --kd-stagger: 36ms;
  --kd-ease-cursor: cubic-bezier(.3, 0, .1, 1);
  --kd-ease-open: cubic-bezier(.2, .7, .2, 1);

  /* Fonts */
  --inter: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --mincho: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --news: "Newsreader", Georgia, "Times New Roman", serif;
  --hant-mincho: "Noto Serif TC", "Songti TC", "BiauKai", "Zen Old Mincho", serif;
  --ja-sans: "Inter", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans", "Noto Sans TC", system-ui, sans-serif;

  /* Layout */
  --gut: 72px;
  --content-max: 1136px;
}

@media (max-width: 767px) {
  :root {
    --gut: 16px;
  }
}

/* System Dark preference (when not forced light) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kd-bg: #14161A;
    --kd-surface: #1D2025;
    --kd-surface-2: #23272D;
    --kd-ink: #E7E5DF;
    --kd-ink-2: #A4A7AD;
    --kd-line: #33373D;
    --kd-line-strong: #70767F;
    --kd-ai: #8EAACF;
    --kd-on-ai: #14161A;
    --kd-ai-hover: #A9C0DD;
    --kd-ai-tint: #22303F;
    --kd-tokiwa: #7DB89B;
    --kd-kuri: #D3A27C;
    --kd-attn-bg: #2B241E;
    --kd-skeleton: #2A2E34;

    --kd-tick: #4A4F57;
    --kd-tick-major: var(--kd-line-strong);
    --kd-cursor: var(--kd-ai);
    --kd-cursor-2: rgba(142, 170, 207, 0.5);
  }
}

/* Explicit data-theme="dark" */
:root[data-theme="dark"] {
  --kd-bg: #14161A;
  --kd-surface: #1D2025;
  --kd-surface-2: #23272D;
  --kd-ink: #E7E5DF;
  --kd-ink-2: #A4A7AD;
  --kd-line: #33373D;
  --kd-line-strong: #70767F;
  --kd-ai: #8EAACF;
  --kd-on-ai: #14161A;
  --kd-ai-hover: #A9C0DD;
  --kd-ai-tint: #22303F;
  --kd-tokiwa: #7DB89B;
  --kd-kuri: #D3A27C;
  --kd-attn-bg: #2B241E;
  --kd-skeleton: #2A2E34;

  --kd-tick: #4A4F57;
  --kd-tick-major: var(--kd-line-strong);
  --kd-cursor: var(--kd-ai);
  --kd-cursor-2: rgba(142, 170, 207, 0.5);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --kd-dur-fast: 0.001ms;
    --kd-dur: 0.001ms;
    --kd-dur-open: 0.001ms;
    --kd-dur-zoom: 0.001ms;
    --kd-dur-cursor-min: 0.001ms;
    --kd-dur-cursor-max: 0.001ms;
    --kd-dur-coin: 0.001ms;
    --kd-stagger: 0.001ms;
  }
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}