/* Hallmark · genre: editorial · macrostructure: Narrative Workflow · theme: custom "Filament"
 * enrichment: E5 hand-built SVG (เครื่องพิมพ์กำลังทำงาน) · nav: N9 edge-aligned · footer: Ft2 inline
 * pre-emit critique: P5 H5 E5 S5 R4 V5
 * axes: paper light-warm · display rounded-sans (Mitr) · accent cool-teal
 *
 * เปลี่ยนจากธีม Almanac เดิมตามที่เจ้าของร้านขอให้ดูเป็นมิตรขึ้นและเหมาะกับมือถือ
 * กระดาษอุ่นขึ้น ขอบมนขึ้น ตัวอักษรกลมขึ้น แต่ยังอ่านง่ายและไม่เล่นจนเสียความน่าเชื่อถือ
 */

:root {
  /* ── paper & ink: โทนอุ่นแบบกระดาษสมุดงาน ──────────────── */
  --color-paper:        oklch(97.8% 0.007 90);
  --color-paper-2:      oklch(95.4% 0.011 88);
  --color-paper-3:      oklch(92.2% 0.015 86);
  --color-ink:          oklch(27.0% 0.018 65);
  --color-ink-2:        oklch(49.0% 0.016 68);
  --color-ink-3:        oklch(64.0% 0.014 72);
  --color-rule:         oklch(89.5% 0.012 85);
  --color-rule-strong:  oklch(79.0% 0.018 82);

  /* ── accent: teal สดใสแต่ไม่แสบตา ───────────────────────── */
  --color-accent:       oklch(54.0% 0.105 192);
  --color-accent-ink:   oklch(44.0% 0.100 194);
  --color-accent-soft:  oklch(93.5% 0.035 190);
  --color-focus:        oklch(60.0% 0.140 192);

  /* ── สถานะของงาน: สีบอกความหมาย แยกจาก accent ────────── */
  --color-active:       oklch(58.0% 0.150 52);     /* ส้มไฟลาเมนต์ = กำลังพิมพ์ */
  --color-active-soft:  oklch(94.5% 0.045 62);
  --color-good:         oklch(53.0% 0.120 155);
  --color-good-soft:    oklch(94.0% 0.042 155);
  --color-warn:         oklch(60.0% 0.130 75);
  --color-warn-soft:    oklch(95.0% 0.050 80);
  --color-alert:        oklch(53.0% 0.165 25);
  --color-alert-soft:   oklch(94.5% 0.040 25);
  --color-idle:         oklch(70.0% 0.012 80);
  --color-idle-soft:    oklch(94.0% 0.008 85);

  /* ── type ─────────────────────────────────────────────────── */
  --font-display: "Mitr", "IBM Plex Sans Thai", "Helvetica Neue", sans-serif;
  --font-body:    "IBM Plex Sans Thai", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", "IBM Plex Sans Thai", ui-monospace, monospace;

  --text-xs:        0.75rem;
  --text-sm:        0.8438rem;
  --text-base:      1rem;
  --text-lg:        1.125rem;
  --text-xl:        1.3125rem;
  --text-2xl:       1.5rem;
  --text-3xl:       1.875rem;
  --text-display-s: clamp(1.625rem, 6vw, 2.25rem);
  --text-display:   clamp(1.875rem, 8vw, 3rem);

  --leading-tight: 1.34;
  --leading-body:  1.75;
  --tracking-label: 0.03em;

  /* ── 4pt space scale ──────────────────────────────────────── */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  2.75rem;
  --space-2xl: 4rem;

  /* ── ขอบมน: เปลี่ยนชัดจากธีมเดิมที่แทบเป็นมุมฉาก ───────── */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  --rule-hair:   1px;
  --rule-strong: 2px;

  --shadow-soft: 0 1px 2px oklch(27% 0.02 65 / .05), 0 10px 24px -14px oklch(27% 0.02 65 / .22);

  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:     cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --measure: 60ch;
  --page-max: 46rem;
  --gutter: clamp(1.125rem, 5vw, 2rem);
  --tap: 2.875rem;          /* พื้นที่แตะขั้นต่ำบนมือถือ */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-paper:       oklch(20.0% 0.012 70);
    --color-paper-2:     oklch(24.0% 0.014 70);
    --color-paper-3:     oklch(28.5% 0.016 70);
    --color-ink:         oklch(94.0% 0.008 85);
    --color-ink-2:       oklch(76.0% 0.012 82);
    --color-ink-3:       oklch(61.0% 0.013 80);
    --color-rule:        oklch(31.0% 0.014 72);
    --color-rule-strong: oklch(43.0% 0.018 74);

    --color-accent:      oklch(76.0% 0.095 190);
    --color-accent-ink:  oklch(84.0% 0.080 190);
    --color-accent-soft: oklch(30.0% 0.045 192);
    --color-focus:       oklch(78.0% 0.110 192);

    --color-active:      oklch(76.0% 0.130 58);
    --color-active-soft: oklch(31.0% 0.055 55);
    --color-good:        oklch(74.0% 0.115 158);
    --color-good-soft:   oklch(29.0% 0.050 158);
    --color-warn:        oklch(78.0% 0.115 78);
    --color-warn-soft:   oklch(31.0% 0.050 78);
    --color-alert:       oklch(71.0% 0.140 28);
    --color-alert-soft:  oklch(30.0% 0.060 28);
    --color-idle:        oklch(58.0% 0.010 80);
    --color-idle-soft:   oklch(27.0% 0.008 80);

    --shadow-soft: 0 1px 2px oklch(0% 0 0 / .4), 0 10px 24px -14px oklch(0% 0 0 / .7);
  }
}

:root[data-theme="dark"] {
  --color-paper:       oklch(20.0% 0.012 70);
  --color-paper-2:     oklch(24.0% 0.014 70);
  --color-paper-3:     oklch(28.5% 0.016 70);
  --color-ink:         oklch(94.0% 0.008 85);
  --color-ink-2:       oklch(76.0% 0.012 82);
  --color-ink-3:       oklch(61.0% 0.013 80);
  --color-rule:        oklch(31.0% 0.014 72);
  --color-rule-strong: oklch(43.0% 0.018 74);
  --color-accent:      oklch(76.0% 0.095 190);
  --color-accent-ink:  oklch(84.0% 0.080 190);
  --color-accent-soft: oklch(30.0% 0.045 192);
  --color-focus:       oklch(78.0% 0.110 192);
  --color-active:      oklch(76.0% 0.130 58);
  --color-active-soft: oklch(31.0% 0.055 55);
  --color-good:        oklch(74.0% 0.115 158);
  --color-good-soft:   oklch(29.0% 0.050 158);
  --color-warn:        oklch(78.0% 0.115 78);
  --color-warn-soft:   oklch(31.0% 0.050 78);
  --color-alert:       oklch(71.0% 0.140 28);
  --color-alert-soft:  oklch(30.0% 0.060 28);
  --color-idle:        oklch(58.0% 0.010 80);
  --color-idle-soft:   oklch(27.0% 0.008 80);
  --shadow-soft: 0 1px 2px oklch(0% 0 0 / .4), 0 10px 24px -14px oklch(0% 0 0 / .7);
}