/* ============================================================
   ACHALA Chiang Dao — site theme v1
   Themes: arabica (default, light) · dusk (dark mode) · ridge (optional alternate)
   Fonts:  English — Raleway (headlines and body)
           Thai    — Noto Sans Thai (headlines and body)
           Sanskrit name — Noto Serif Devanagari
           (Raleway and Noto Sans Thai are loaded by the <link> in index.html <head>.)
   Components use only the semantic --ac-* tokens.
   Every text pairing passes WCAG AA.
   Cards (--ac-card) are ivory panels in every theme.
   Alternating page sections use --ac-band, not --ac-card.
   ============================================================ */

:root {
  /* ---- type ---- */
  --font-display: "Raleway", "Noto Sans Thai", system-ui, sans-serif;   /* English headlines */
  --font-display-thai: "Noto Sans Thai", "Raleway", Tahoma, sans-serif; /* Thai headlines, weight 400 */
  --font-body: "Raleway", "Noto Sans Thai", system-ui, sans-serif;      /* Thai falls through to Noto Sans Thai automatically */
  --font-thai: "Noto Sans Thai", Tahoma, sans-serif;
  --font-devanagari: "Noto Serif Devanagari", serif;             /* only for the Sanskrit name अचल */

  /* ---- arabica: Chiang Dao Arabica & Coffee Flower — E1 Ember → #15 Vienna Roast ---- */
  --arabica-timber:   #3B2418;  /* Espresso Roast / กาแฟคั่วเข้ม */
  --arabica-cliff:    #4A3B33;  /* Mountain Loam Shadow / เงาดินร่วนภูเขา */
  --arabica-shade:    #5E3A30;  /* Cascara Husk / เปลือกเชอร์รีกาแฟตากแห้ง */
  --arabica-ink:      #22160F;  /* Dark Roast Ink / หมึกกาแฟดำ */
  --arabica-haze:     #EDE6DA;  /* Coffee Blossom Haze / ไอดอกกาแฟ */
  --arabica-stone:    #DED2C1;  /* Parchment Husk / กาแฟกะลา */
  --arabica-clay:     #9C5B3B;  /* Ripe Cherry Clay / เชอร์รีกาแฟสุก */
  --arabica-hairline: #D3C6B4;  /* Crema Hairline / เส้นครีมา */
  --arabica-ember:    #58442C;  /* Vienna Roast / คั่วเวียนนา (shade #15, amber range) */
  --arabica-canvas:   #FAF6EF;  /* Coffee Flower White / ขาวดอกกาแฟ */

  /* ---- dusk: Valley Dusk & Mor Hom Indigo ---- */
  --dusk-timber:   #3A2A20;  /* Night Teak / สักยามค่ำ */
  --dusk-cliff:    #2B3346;  /* Dusk Ridge Shadow / เงาสันดอยยามโพล้เพล้ */
  --dusk-shade:    #1D2A44;  /* Mor Hom Indigo / ครามหม้อห้อม */
  --dusk-ink:      #121722;  /* Nocturnal Blue Ink / หมึกน้ำเงินราตรี */
  --dusk-haze:     #8E9AB4;  /* Valley Haze / หมอกหุบเขา */
  --dusk-stone:    #5A6378;  /* Dusk Stone / หินยามเย็น */
  --dusk-clay:     #9A5A3E;  /* Twilight Terracotta / ดินเผาแสงโพล้เพล้ */
  --dusk-hairline: #39435A;  /* Indigo Thread Hairline / เส้นด้ายคราม */
  --dusk-ember:    #E3A857;  /* Beeswax Flame / เปลวเทียนขี้ผึ้ง */
  --dusk-canvas:   #F1EADC;  /* Unbleached Cotton / ฝ้ายดิบ */

  /* ---- ridge: Cement & Black Steel — E2 Canvas → #4 Chalk Cliff ---- */
  --ridge-timber:   #3A3532;  /* Old Timber Post / เสาไม้เก่า */
  --ridge-cliff:    #4D4C49;  /* Cement Render Shadow / เงาผนังปูนฉาบ */
  --ridge-shade:    #5E5B57;  /* Raw Cement / ปูนเปลือย */
  --ridge-ink:      #1C1C1B;  /* Black Steel / เหล็กดำ */
  --ridge-haze:     #ECEAE6;  /* Plinth Haze / ไอฐานปูน */
  --ridge-stone:    #DEDBD5;  /* Concrete Dust / ฝุ่นคอนกรีต */
  --ridge-clay:     #9A5A3C;  /* Roof Tile / กระเบื้องหลังคา */
  --ridge-hairline: #B3AEA8;  /* Steel Edge Hairline (darkened for Chalk Cliff canvas) / เส้นขอบเหล็ก */
  --ridge-ember:    #D49058;  /* Breeze Block Glow / แสงผ่านช่องลม */
  --ridge-canvas:   #CECBC8;  /* Chalk Cliff / ผาชอล์ก (shade #4, warm stone range) */
}

:root, :root[data-theme="arabica"] {
  --ac-bg: var(--arabica-canvas);
  --ac-text: var(--arabica-ink);
  --ac-text-muted: var(--arabica-cliff);
  --ac-kicker: var(--arabica-clay);
  --ac-strip: var(--arabica-timber);
  --ac-on-strip: var(--arabica-canvas);
  --ac-strip-hover: var(--arabica-clay);
  --ac-on-strip-hover: var(--arabica-canvas);
  --ac-tag-on-strip: var(--arabica-haze);
  --ac-badge: var(--arabica-ember);
  --ac-on-badge: var(--arabica-canvas);
  --ac-scrim: var(--arabica-ink);
  --ac-on-scrim: var(--arabica-canvas);
  --ac-progress: var(--arabica-clay);
  --ac-card: var(--arabica-canvas);
  --ac-on-card: var(--arabica-ink);
  --ac-card-badge: var(--arabica-clay);
  --ac-on-card-badge: var(--arabica-canvas);
  --ac-icon: var(--arabica-timber);
  --ac-check: var(--arabica-shade);
  --ac-divider: var(--arabica-hairline);
  --ac-bar: var(--arabica-canvas);
  --ac-field: var(--arabica-stone);
  --ac-on-field: var(--arabica-ink);
  --ac-field-border: var(--arabica-cliff);
  --ac-tag: var(--arabica-haze);
  --ac-on-tag: var(--arabica-shade);
  --ac-cta: var(--arabica-timber);
  --ac-on-cta: var(--arabica-canvas);
  --ac-glow: var(--arabica-ember);
  --ac-band: var(--arabica-haze);
  --ac-on-band: var(--arabica-ink);
  --ac-on-band-muted: var(--arabica-cliff);
  --ac-band-kicker: var(--arabica-shade);
  --ac-icon-on-bg: var(--arabica-timber);
  --ac-link: var(--ac-kicker);
  --ac-focus: var(--ac-text);
  color-scheme: light;
}

/* Dark mode: follows the device setting unless a theme is set explicitly */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --ac-bg: var(--dusk-shade);
    --ac-text: var(--dusk-canvas);
    --ac-text-muted: var(--dusk-haze);
    --ac-kicker: var(--dusk-ember);
    --ac-strip: var(--dusk-timber);
    --ac-on-strip: var(--dusk-canvas);
    --ac-strip-hover: var(--dusk-shade);
    --ac-on-strip-hover: var(--dusk-canvas);
    --ac-tag-on-strip: var(--dusk-haze);
    --ac-badge: var(--dusk-ember);
    --ac-on-badge: var(--dusk-ink);
    --ac-scrim: var(--dusk-ink);
    --ac-on-scrim: var(--dusk-canvas);
    --ac-progress: var(--dusk-ember);
    --ac-card: var(--dusk-canvas);
    --ac-on-card: var(--dusk-ink);
    --ac-card-badge: var(--dusk-timber);
    --ac-on-card-badge: var(--dusk-canvas);
    --ac-icon: var(--dusk-timber);
    --ac-check: var(--dusk-shade);
    --ac-divider: var(--dusk-hairline);
    --ac-bar: var(--dusk-ink);
    --ac-field: var(--dusk-cliff);
    --ac-on-field: var(--dusk-canvas);
    --ac-field-border: var(--dusk-haze);
    --ac-tag: var(--dusk-shade);
    --ac-on-tag: var(--dusk-haze);
    --ac-cta: var(--dusk-ember);
    --ac-on-cta: var(--dusk-ink);
    --ac-glow: var(--dusk-ember);
    --ac-band: var(--dusk-ink);
    --ac-on-band: var(--dusk-canvas);
    --ac-on-band-muted: var(--dusk-haze);
    --ac-band-kicker: var(--dusk-ember);
    --ac-icon-on-bg: var(--dusk-haze);
    --ac-link: var(--ac-kicker);
    --ac-focus: var(--ac-text);
    color-scheme: dark;
  }
}

:root[data-theme="dusk"] {
  --ac-bg: var(--dusk-shade);
  --ac-text: var(--dusk-canvas);
  --ac-text-muted: var(--dusk-haze);
  --ac-kicker: var(--dusk-ember);
  --ac-strip: var(--dusk-timber);
  --ac-on-strip: var(--dusk-canvas);
  --ac-strip-hover: var(--dusk-shade);
  --ac-on-strip-hover: var(--dusk-canvas);
  --ac-tag-on-strip: var(--dusk-haze);
  --ac-badge: var(--dusk-ember);
  --ac-on-badge: var(--dusk-ink);
  --ac-scrim: var(--dusk-ink);
  --ac-on-scrim: var(--dusk-canvas);
  --ac-progress: var(--dusk-ember);
  --ac-card: var(--dusk-canvas);
  --ac-on-card: var(--dusk-ink);
  --ac-card-badge: var(--dusk-timber);
  --ac-on-card-badge: var(--dusk-canvas);
  --ac-icon: var(--dusk-timber);
  --ac-check: var(--dusk-shade);
  --ac-divider: var(--dusk-hairline);
  --ac-bar: var(--dusk-ink);
  --ac-field: var(--dusk-cliff);
  --ac-on-field: var(--dusk-canvas);
  --ac-field-border: var(--dusk-haze);
  --ac-tag: var(--dusk-shade);
  --ac-on-tag: var(--dusk-haze);
  --ac-cta: var(--dusk-ember);
  --ac-on-cta: var(--dusk-ink);
  --ac-glow: var(--dusk-ember);
  --ac-band: var(--dusk-ink);
  --ac-on-band: var(--dusk-canvas);
  --ac-on-band-muted: var(--dusk-haze);
  --ac-band-kicker: var(--dusk-ember);
  --ac-icon-on-bg: var(--dusk-haze);
  --ac-link: var(--ac-kicker);
  --ac-focus: var(--ac-text);
  color-scheme: dark;
}

:root[data-theme="ridge"] {
  --ac-bg: var(--ridge-canvas);
  --ac-text: var(--ridge-ink);
  --ac-text-muted: var(--ridge-cliff);
  --ac-kicker: var(--ridge-timber);
  --ac-strip: var(--ridge-timber);
  --ac-on-strip: var(--ridge-canvas);
  --ac-strip-hover: var(--ridge-cliff);
  --ac-on-strip-hover: var(--ridge-canvas);
  --ac-tag-on-strip: var(--ridge-haze);
  --ac-badge: var(--ridge-ember);
  --ac-on-badge: var(--ridge-ink);
  --ac-scrim: var(--ridge-ink);
  --ac-on-scrim: var(--ridge-canvas);
  --ac-progress: var(--ridge-ember);
  --ac-card: var(--ridge-canvas);
  --ac-on-card: var(--ridge-ink);
  --ac-card-badge: var(--ridge-timber);
  --ac-on-card-badge: var(--ridge-canvas);
  --ac-icon: var(--ridge-timber);
  --ac-check: var(--ridge-shade);
  --ac-divider: var(--ridge-hairline);
  --ac-bar: var(--ridge-canvas);
  --ac-field: var(--ridge-stone);
  --ac-on-field: var(--ridge-ink);
  --ac-field-border: var(--ridge-cliff);
  --ac-tag: var(--ridge-haze);
  --ac-on-tag: var(--ridge-shade);
  --ac-cta: var(--ridge-ember);
  --ac-on-cta: var(--ridge-ink);
  --ac-glow: var(--ridge-ember);
  --ac-band: var(--ridge-haze);
  --ac-on-band: var(--ridge-ink);
  --ac-on-band-muted: var(--ridge-cliff);
  --ac-band-kicker: var(--ridge-timber);
  --ac-icon-on-bg: var(--ridge-timber);
  --ac-link: var(--ac-kicker);
  --ac-focus: var(--ac-text);
  color-scheme: light;
}

/* ---- base ---- */
body { background: var(--ac-bg); color: var(--ac-text); font-family: var(--font-body); }
h1, h2, .display { font-family: var(--font-display); font-weight: 400; letter-spacing: .01em; }
:lang(th) { font-family: var(--font-thai); }
:lang(th) h1, :lang(th) h2, :lang(th) h3, :lang(th) .display { font-family: var(--font-display-thai); font-weight: 400; }
a { color: var(--ac-link); }
:focus-visible { outline: 2px solid var(--ac-focus); outline-offset: 2px; }
hr { border: 0; border-top: 1px solid var(--ac-divider); }
.ac-band { background: var(--ac-band); color: var(--ac-on-band); }
[lang="sa"], .devanagari { font-family: var(--font-devanagari); }