/* ==========================================================================
   纸墨 · Paper & Ink — design tokens
   One source of truth for colour, type, space, depth and motion.
   Themes: [data-theme="day"] (default) and [data-theme="night"].
   ========================================================================== */

@layer tokens {
  :root {
    /* ---- type ------------------------------------------------------------ */
    --font-kai: "LXGW WenKai", "Kaiti SC", "STKaiti", "KaiTi", serif;
    --font-ui: var(--font-kai);
    --font-display: var(--font-kai);
    --font-mono: "JetBrains Mono Variable", ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas,
      "Noto Sans Mono CJK SC", monospace;

    --text-2xs: 0.6875rem;  /* 11 */
    --text-xs: 0.75rem;     /* 12 */
    --text-sm: 0.8125rem;   /* 13 */
    --text-md: 0.9375rem;   /* 15 */
    --text-lg: 1.0625rem;   /* 17 */
    --text-xl: 1.3125rem;   /* 21 */
    --text-2xl: 1.625rem;   /* 26 */
    --text-3xl: 2.125rem;   /* 34 */
    --text-4xl: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);

    --leading-tight: 1.25;
    --leading-ui: 1.45;
    --leading-read: 1.72;   /* comfortable for mixed CJK / Latin reading */

    /* ---- space (4px grid) ------------------------------------------------ */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
    --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px;

    --radius-xs: 6px;
    --radius-sm: 9px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --radius-pill: 999px;

    /* ---- layout ---------------------------------------------------------- */
    --rail-w: 68px;
    --list-w: 316px;
    --read-w: 46rem;       /* reading column */
    --topbar-h: 56px;
    --tabbar-h: 62px;
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-t: env(safe-area-inset-top, 0px);

    /* ---- motion ---------------------------------------------------------- */
    --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
    --ease-in-out: cubic-bezier(0.6, 0, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
    --dur-1: 120ms;
    --dur-2: 200ms;
    --dur-3: 320ms;
    --dur-4: 520ms;

    /* ---- z --------------------------------------------------------------- */
    --z-rail: 20; --z-topbar: 30; --z-sheet: 60; --z-toast: 80; --z-modal: 90;

    color-scheme: light;
  }

  /* ======================== DAY · 宣纸 ivory cotton paper ======================= */
  :root, [data-theme="day"] {
    --paper: #f6f0e5;
    --paper-tex: url("../assets/paper-day.webp");
    --paper-tex-size: 320px;
    --sheet: #fbf8f2;            /* smooth sheets laid on the desk */
    --sheet-raised: #fffdf8;
    --well: #efe7d9;             /* recessed areas: inputs, code */
    --well-2: #e8dfcf;

    --ink: #29231f;
    --ink-2: #5d544b;
    --ink-3: #8b8177;
    --ink-4: #b4aa9e;
    --ink-inverse: #fbf8f2;

    --rule: rgb(41 35 31 / 0.11);
    --rule-2: rgb(41 35 31 / 0.19);
    --rule-3: rgb(41 35 31 / 0.32);

    --accent: #c4603d;           /* terracotta — the Claude warmth */
    --accent-ink: #a64c2e;       /* text-safe accent on paper */
    --accent-soft: rgb(212 112 78 / 0.12);
    --accent-line: rgb(196 96 61 / 0.38);
    --cinnabar: #b53f2c;         /* the seal */

    --engine-codex: #3c5a8c;     /* ink blue */
    --engine-claude: #c4603d;    /* terracotta */
    --engine-opencode: #477565;  /* pine sage */

    /* project inks — the coloured spine of each project notebook */
    --project-cinnabar: #b5442e;
    --project-indigo: #34528a;
    --project-pine: #3f6e5a;
    --project-ochre: #b07a24;
    --project-plum: #7a4669;
    --project-ink: #3b342e;

    --ok: #4f7a49;
    --warn: #b0832c;
    --danger: #b2402d;
    --info: #3c5a8c;

    --select: rgb(196 96 61 / 0.20);
    --focus: 0 0 0 3px rgb(196 96 61 / 0.28);

    --shadow-1: 0 1px 0 rgb(255 255 255 / 0.7) inset, 0 1px 2px rgb(70 48 26 / 0.06);
    --shadow-2: 0 1px 0 rgb(255 255 255 / 0.7) inset, 0 1px 2px rgb(70 48 26 / 0.06),
      0 10px 28px -14px rgb(70 48 26 / 0.22);
    --shadow-3: 0 1px 0 rgb(255 255 255 / 0.8) inset, 0 2px 4px rgb(70 48 26 / 0.06),
      0 24px 60px -20px rgb(70 48 26 / 0.32);
    --scrim: rgb(41 31 22 / 0.28);
    color-scheme: light;
  }

  /* ======================== NIGHT · 墨夜 indigo ink paper ======================== */
  [data-theme="night"] {
    --paper: #1c1f2c;
    --paper-tex: url("../assets/paper-night.webp");
    --sheet: #23273a;
    --sheet-raised: #2a2f45;
    --well: #181a26;
    --well-2: #141621;

    --ink: #ece5d8;
    --ink-2: #bdb4a6;
    --ink-3: #8c8679;
    --ink-4: #5f5b55;
    --ink-inverse: #1c1f2c;

    --rule: rgb(236 229 216 / 0.09);
    --rule-2: rgb(236 229 216 / 0.16);
    --rule-3: rgb(236 229 216 / 0.28);

    --accent: #e48b67;
    --accent-ink: #eda080;
    --accent-soft: rgb(228 139 103 / 0.14);
    --accent-line: rgb(228 139 103 / 0.42);
    --cinnabar: #cf5741;

    --engine-codex: #8fa9da;
    --engine-claude: #e8916d;
    --engine-opencode: #86b8a2;

    --project-cinnabar: #e07a62;
    --project-indigo: #8aa6dc;
    --project-pine: #7fb39b;
    --project-ochre: #e0b05e;
    --project-plum: #c58fb3;
    --project-ink: #cfc6b8;

    --ok: #8fbf86;
    --warn: #e0b45c;
    --danger: #ec8571;
    --info: #8fa9da;

    --select: rgb(228 139 103 / 0.26);
    --focus: 0 0 0 3px rgb(228 139 103 / 0.32);

    --shadow-1: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 1px 2px rgb(0 0 0 / 0.30);
    --shadow-2: 0 1px 0 rgb(255 255 255 / 0.05) inset, 0 1px 2px rgb(0 0 0 / 0.30),
      0 12px 32px -14px rgb(0 0 0 / 0.55);
    --shadow-3: 0 1px 0 rgb(255 255 255 / 0.06) inset, 0 2px 6px rgb(0 0 0 / 0.30),
      0 28px 70px -20px rgb(0 0 0 / 0.70);
    --scrim: rgb(8 9 14 / 0.55);
    color-scheme: dark;
  }
}