/* ==========================================================================
   KhanomInfo Design Tokens v1.0 — Product Completion V2
   แหล่งเดียวของ design decisions ตาม docs/DESIGN_SYSTEM_SPEC.md
   (พาเลตต์หลักวัดจาก protected production baseline 2026-09-12 ไม่ใช่การเดา;
   v1.0 ขยาย scale สำหรับ visual product ตาม KHANOMINFO_PRODUCT_COMPLETION_SPEC.md)
   กฎ: ห้าม plugin/theme สร้าง palette/spacing/typography ของตัวเอง —
   ทุก component อ่าน token จากไฟล์นี้เท่านั้น
   ========================================================================== */

:root {
    /* ---- Palette (slate/cyan/teal — วัดจาก baseline) -------------------- */
    --ki-ink:        #0f172a; /* slate-900 — headings, primary text        */
    --ki-body:       #475569; /* slate-600 — body text                     */
    --ki-muted:      #64748b; /* slate-500 — secondary text (location,time)*/
    --ki-line:       #e2e8f0; /* slate-200 — borders, dividers             */
    --ki-surface:    #f8fafc; /* slate-50 — card/section background        */
    --ki-cyan-soft:  #ecfeff; /* cyan-50 — accent surface                  */
    --ki-cyan-line:  #bae6fd; /* cyan-200 — accent border                  */
    --ki-teal:       #0f766e; /* teal-700 — primary actions                */
    --ki-teal-hover: #115e59; /* teal-800 — action hover                   */
    --ki-sky:        #075985; /* sky-800 — links on light                  */
    --ki-emerald:    #047857; /* emerald-700 — success / verified          */
    --ki-amber:      #b45309; /* amber-700 — warning / stale               */
    --ki-red:        #b91c1c; /* red-700 — error / rejected                */

    /* ---- Extended palette (v1.0 — destination-platform depth) ----------- */
    --ki-deep:       #164e63; /* cyan-900 — footer/hero deep band          */
    --ki-deep-ink:   #e0f2fe; /* sky-100 — text on deep band               */
    --ki-deep-muted: #a5c8d8; /* muted text on deep band (AA on --ki-deep) */
    --ki-sand:       #fef9f0; /* warm sand surface — alternating sections  */
    --ki-gold:       #d97706; /* amber-600 — quest/accent highlights       */
    --ki-hero-from:  #0e7490; /* cyan-700 — hero gradient start            */
    --ki-hero-to:    #164e63; /* cyan-900 — hero gradient end              */
    --ki-white:      #ffffff;

    /* ---- Typography -------------------------------------------------------
       ฟอนต์ไทย: OWNER DECISION (D-06) ตัดสินแล้ว 2026-09-13 — ใช้ system
       stack ต่อถาวร ไม่ต้องถามซ้ำ (บันทึกใน KHANOMINFO_DECISION_LOG.md)   */
    --ki-font-family:      system-ui, -apple-system, "Segoe UI", sans-serif;
    --ki-font-size-display: 2.75rem;  /* hero display (mobile ลดใน media query) */
    --ki-font-size-h1:     2rem;
    --ki-font-size-h2:     1.5rem;
    --ki-font-size-h3:     1.25rem;
    --ki-font-size-body:   1rem;
    --ki-font-size-sm:     .875rem;
    --ki-line-height-heading: 1.25;
    --ki-line-height-body:    1.6;

    /* ---- Shape & rhythm --------------------------------------------------- */
    --ki-radius:     12px;
    --ki-radius-sm:  8px;
    --ki-radius-lg:  20px;
    --ki-gap:        1rem;
    /* Spacing scale (multiples of .25rem) */
    --ki-space-1: .25rem;
    --ki-space-2: .5rem;
    --ki-space-3: .75rem;
    --ki-space-4: 1rem;
    --ki-space-5: 1.5rem;
    --ki-space-6: 2rem;
    --ki-space-7: 3rem;
    --ki-space-8: 4rem;
    /* Container: ~1200px content, 1280px wide — ตาม spec V2 (1200–1280px) */
    --ki-max-width:      75rem;
    --ki-max-width-wide: 80rem;

    /* ---- Focus & elevation ------------------------------------------------ */
    --ki-focus-ring: 0 0 0 3px rgba(14, 116, 144, .35);
    --ki-shadow:     0 1px 2px rgba(15, 23, 42, .06);
    --ki-shadow-md:  0 4px 12px rgba(15, 23, 42, .08);
    --ki-shadow-lg:  0 12px 32px rgba(15, 23, 42, .12);

    /* ---- Layering ---------------------------------------------------------- */
    --ki-z-header: 50;
    --ki-z-overlay: 90;

    /* ---- Breakpoints (reference — CSS custom properties cannot be used in
       media queries; components.css uses these exact values):
       mobile <640px · tablet 640–1023px · desktop 1024–1439px · wide ≥1440px */
}