/* ============================================================
   M3 Tokens — Yofatik AI Client (VIBRANT)
   Seed: #b31e27 (HCT ≈ H 27 / C 76 / T 39)
   Version: 1.1.0 — vibrant palette, higher chroma primary + tertiary
   ============================================================ */

/* --------- Reference palette (tonal) --------- */
:root {
  /* Primary (P) — Yofatik brand red (vibrant, punchy) — seed #e6001d */
  --md-ref-palette-primary-0: #000000;
  --md-ref-palette-primary-10: #410005;
  --md-ref-palette-primary-20: #6e0009;
  --md-ref-palette-primary-25: #84000f;
  --md-ref-palette-primary-30: #9b0014;
  --md-ref-palette-primary-35: #b3001a;
  --md-ref-palette-primary-40: #e6001d;
  --md-ref-palette-primary-50: #f43c3f;
  --md-ref-palette-primary-60: #ff5e54;
  --md-ref-palette-primary-70: #ff897e;
  --md-ref-palette-primary-80: #ffb4ab;
  --md-ref-palette-primary-90: #ffdad6;
  --md-ref-palette-primary-95: #ffedea;
  --md-ref-palette-primary-98: #fff8f7;
  --md-ref-palette-primary-99: #fffbff;
  --md-ref-palette-primary-100: #ffffff;

  /* Secondary (S) — slightly more saturated */
  --md-ref-palette-secondary-0: #000000;
  --md-ref-palette-secondary-10: #321010;
  --md-ref-palette-secondary-20: #4d2421;
  --md-ref-palette-secondary-25: #5b2e2c;
  --md-ref-palette-secondary-30: #683937;
  --md-ref-palette-secondary-35: #774441;
  --md-ref-palette-secondary-40: #864e4c;
  --md-ref-palette-secondary-50: #a26765;
  --md-ref-palette-secondary-60: #be817e;
  --md-ref-palette-secondary-70: #db9b97;
  --md-ref-palette-secondary-80: #f9b6b1;
  --md-ref-palette-secondary-90: #ffdad6;
  --md-ref-palette-secondary-95: #ffedea;
  --md-ref-palette-secondary-99: #fffbff;
  --md-ref-palette-secondary-100: #ffffff;

  /* Tertiary (T) — VIBRANT amber/gold, high chroma */
  --md-ref-palette-tertiary-0: #000000;
  --md-ref-palette-tertiary-10: #2a1a00;
  --md-ref-palette-tertiary-20: #452b00;
  --md-ref-palette-tertiary-25: #543500;
  --md-ref-palette-tertiary-30: #633f00;
  --md-ref-palette-tertiary-35: #734a00;
  --md-ref-palette-tertiary-40: #845500;
  --md-ref-palette-tertiary-50: #a66c00;
  --md-ref-palette-tertiary-60: #c98500;
  --md-ref-palette-tertiary-70: #ec9f1a;
  --md-ref-palette-tertiary-80: #ffba3a;
  --md-ref-palette-tertiary-90: #ffdea0;
  --md-ref-palette-tertiary-95: #ffefd0;
  --md-ref-palette-tertiary-99: #fffbff;
  --md-ref-palette-tertiary-100: #ffffff;

  /* Error (E) — Material standard */
  --md-ref-palette-error-0: #000000;
  --md-ref-palette-error-10: #410002;
  --md-ref-palette-error-20: #690005;
  --md-ref-palette-error-30: #93000a;
  --md-ref-palette-error-40: #ba1a1a;
  --md-ref-palette-error-50: #de3730;
  --md-ref-palette-error-60: #ff5449;
  --md-ref-palette-error-70: #ff897d;
  --md-ref-palette-error-80: #ffb4ab;
  --md-ref-palette-error-90: #ffdad6;
  --md-ref-palette-error-100: #ffffff;

  /* Neutral (N) */
  --md-ref-palette-neutral-0: #000000;
  --md-ref-palette-neutral-4: #15100f;
  --md-ref-palette-neutral-6: #1b1716;
  --md-ref-palette-neutral-10: #201a19;
  --md-ref-palette-neutral-12: #251f1e;
  --md-ref-palette-neutral-17: #302a29;
  --md-ref-palette-neutral-20: #362f2e;
  --md-ref-palette-neutral-22: #3b3433;
  --md-ref-palette-neutral-25: #413a39;
  --md-ref-palette-neutral-30: #4d4544;
  --md-ref-palette-neutral-35: #595150;
  --md-ref-palette-neutral-40: #655c5b;
  --md-ref-palette-neutral-50: #7e7472;
  --md-ref-palette-neutral-60: #998f8d;
  --md-ref-palette-neutral-70: #b4a9a7;
  --md-ref-palette-neutral-80: #d0c4c1;
  --md-ref-palette-neutral-87: #e1d5d2;
  --md-ref-palette-neutral-90: #ede0de;
  --md-ref-palette-neutral-92: #f3e6e3;
  --md-ref-palette-neutral-94: #f9ebe9;
  --md-ref-palette-neutral-95: #fceeec;
  --md-ref-palette-neutral-96: #fff1ed;
  --md-ref-palette-neutral-98: #fff8f7;
  --md-ref-palette-neutral-99: #fffbff;
  --md-ref-palette-neutral-100: #ffffff;

  /* Neutral Variant (NV) */
  --md-ref-palette-neutral-variant-0: #000000;
  --md-ref-palette-neutral-variant-10: #271817;
  --md-ref-palette-neutral-variant-20: #3d2e2c;
  --md-ref-palette-neutral-variant-30: #564442;
  --md-ref-palette-neutral-variant-40: #6e5b58;
  --md-ref-palette-neutral-variant-50: #847372;
  --md-ref-palette-neutral-variant-60: #9f8d8a;
  --md-ref-palette-neutral-variant-70: #baa7a4;
  --md-ref-palette-neutral-variant-80: #d8c2bf;
  --md-ref-palette-neutral-variant-90: #f4ddda;
  --md-ref-palette-neutral-variant-99: #fffbff;
  --md-ref-palette-neutral-variant-100: #ffffff;
}

/* --------- System colors — LIGHT --------- */
:root,
[data-theme="light"] {
  --md-sys-color-primary: var(--md-ref-palette-primary-40);
  --md-sys-color-on-primary: var(--md-ref-palette-primary-100);
  --md-sys-color-primary-container: var(--md-ref-palette-primary-90);
  --md-sys-color-on-primary-container: var(--md-ref-palette-primary-10);
  --md-sys-color-inverse-primary: var(--md-ref-palette-primary-80);

  --md-sys-color-secondary: var(--md-ref-palette-secondary-40);
  --md-sys-color-on-secondary: var(--md-ref-palette-secondary-100);
  --md-sys-color-secondary-container: var(--md-ref-palette-secondary-90);
  --md-sys-color-on-secondary-container: var(--md-ref-palette-secondary-10);

  --md-sys-color-tertiary: var(--md-ref-palette-tertiary-40);
  --md-sys-color-on-tertiary: var(--md-ref-palette-tertiary-100);
  --md-sys-color-tertiary-container: var(--md-ref-palette-tertiary-90);
  --md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary-10);

  --md-sys-color-error: var(--md-ref-palette-error-40);
  --md-sys-color-on-error: var(--md-ref-palette-error-100);
  --md-sys-color-error-container: var(--md-ref-palette-error-90);
  --md-sys-color-on-error-container: var(--md-ref-palette-error-10);

  --md-sys-color-surface: var(--md-ref-palette-neutral-98);
  --md-sys-color-on-surface: var(--md-ref-palette-neutral-10);
  --md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant-90);
  --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant-30);
  --md-sys-color-surface-dim: var(--md-ref-palette-neutral-87);
  --md-sys-color-surface-bright: var(--md-ref-palette-neutral-98);
  --md-sys-color-surface-container-lowest: var(--md-ref-palette-neutral-100);
  --md-sys-color-surface-container-low: var(--md-ref-palette-neutral-96);
  --md-sys-color-surface-container: var(--md-ref-palette-neutral-94);
  --md-sys-color-surface-container-high: var(--md-ref-palette-neutral-92);
  --md-sys-color-surface-container-highest: var(--md-ref-palette-neutral-90);
  --md-sys-color-inverse-surface: var(--md-ref-palette-neutral-20);
  --md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral-95);

  --md-sys-color-outline: var(--md-ref-palette-neutral-variant-50);
  --md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant-80);

  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;
}

/* --------- System colors — DARK --------- */
[data-theme="dark"] {
  --md-sys-color-primary: var(--md-ref-palette-primary-80);
  --md-sys-color-on-primary: var(--md-ref-palette-primary-20);
  --md-sys-color-primary-container: var(--md-ref-palette-primary-30);
  --md-sys-color-on-primary-container: var(--md-ref-palette-primary-90);
  --md-sys-color-inverse-primary: var(--md-ref-palette-primary-40);

  --md-sys-color-secondary: var(--md-ref-palette-secondary-80);
  --md-sys-color-on-secondary: var(--md-ref-palette-secondary-20);
  --md-sys-color-secondary-container: var(--md-ref-palette-secondary-30);
  --md-sys-color-on-secondary-container: var(--md-ref-palette-secondary-90);

  --md-sys-color-tertiary: var(--md-ref-palette-tertiary-80);
  --md-sys-color-on-tertiary: var(--md-ref-palette-tertiary-20);
  --md-sys-color-tertiary-container: var(--md-ref-palette-tertiary-30);
  --md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary-90);

  --md-sys-color-error: var(--md-ref-palette-error-80);
  --md-sys-color-on-error: var(--md-ref-palette-error-20);
  --md-sys-color-error-container: var(--md-ref-palette-error-30);
  --md-sys-color-on-error-container: var(--md-ref-palette-error-90);

  --md-sys-color-surface: var(--md-ref-palette-neutral-6);
  --md-sys-color-on-surface: var(--md-ref-palette-neutral-90);
  --md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant-30);
  --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant-80);
  --md-sys-color-surface-dim: var(--md-ref-palette-neutral-6);
  --md-sys-color-surface-bright: var(--md-ref-palette-neutral-25);
  --md-sys-color-surface-container-lowest: var(--md-ref-palette-neutral-4);
  --md-sys-color-surface-container-low: var(--md-ref-palette-neutral-10);
  --md-sys-color-surface-container: var(--md-ref-palette-neutral-12);
  --md-sys-color-surface-container-high: var(--md-ref-palette-neutral-17);
  --md-sys-color-surface-container-highest: var(--md-ref-palette-neutral-22);
  --md-sys-color-inverse-surface: var(--md-ref-palette-neutral-90);
  --md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral-20);

  --md-sys-color-outline: var(--md-ref-palette-neutral-variant-60);
  --md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant-30);

  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;
}

/* Auto dark mode (fallback when no data-theme set) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --md-sys-color-primary: var(--md-ref-palette-primary-80);
    --md-sys-color-on-primary: var(--md-ref-palette-primary-20);
    --md-sys-color-primary-container: var(--md-ref-palette-primary-30);
    --md-sys-color-on-primary-container: var(--md-ref-palette-primary-90);
    --md-sys-color-inverse-primary: var(--md-ref-palette-primary-40);
    --md-sys-color-secondary: var(--md-ref-palette-secondary-80);
    --md-sys-color-on-secondary: var(--md-ref-palette-secondary-20);
    --md-sys-color-secondary-container: var(--md-ref-palette-secondary-30);
    --md-sys-color-on-secondary-container: var(--md-ref-palette-secondary-90);
    --md-sys-color-tertiary: var(--md-ref-palette-tertiary-80);
    --md-sys-color-on-tertiary: var(--md-ref-palette-tertiary-20);
    --md-sys-color-tertiary-container: var(--md-ref-palette-tertiary-30);
    --md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary-90);
    --md-sys-color-error: var(--md-ref-palette-error-80);
    --md-sys-color-on-error: var(--md-ref-palette-error-20);
    --md-sys-color-error-container: var(--md-ref-palette-error-30);
    --md-sys-color-on-error-container: var(--md-ref-palette-error-90);
    --md-sys-color-surface: var(--md-ref-palette-neutral-6);
    --md-sys-color-on-surface: var(--md-ref-palette-neutral-90);
    --md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant-30);
    --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant-80);
    --md-sys-color-surface-container-lowest: var(--md-ref-palette-neutral-4);
    --md-sys-color-surface-container-low: var(--md-ref-palette-neutral-10);
    --md-sys-color-surface-container: var(--md-ref-palette-neutral-12);
    --md-sys-color-surface-container-high: var(--md-ref-palette-neutral-17);
    --md-sys-color-surface-container-highest: var(--md-ref-palette-neutral-22);
    --md-sys-color-inverse-surface: var(--md-ref-palette-neutral-90);
    --md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral-20);
    --md-sys-color-outline: var(--md-ref-palette-neutral-variant-60);
    --md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant-30);
  }
}

/* --------- Shape --------- */
:root {
  --md-sys-shape-corner-none: 0;
  --md-sys-shape-corner-xs: 4px;
  --md-sys-shape-corner-sm: 8px;
  --md-sys-shape-corner-md: 12px;
  --md-sys-shape-corner-lg: 16px;
  --md-sys-shape-corner-xl: 28px;
  --md-sys-shape-corner-full: 9999px;
}

/* --------- Elevation (shadow) --------- */
:root,
[data-theme="light"] {
  --md-sys-elevation-level-0: none;
  --md-sys-elevation-level-1: 0px 1px 2px 0px rgb(0 0 0 / 0.30), 0px 1px 3px 1px rgb(0 0 0 / 0.15);
  --md-sys-elevation-level-2: 0px 1px 2px 0px rgb(0 0 0 / 0.30), 0px 2px 6px 2px rgb(0 0 0 / 0.15);
  --md-sys-elevation-level-3: 0px 4px 8px 3px rgb(0 0 0 / 0.15), 0px 1px 3px 0px rgb(0 0 0 / 0.30);
  --md-sys-elevation-level-4: 0px 6px 10px 4px rgb(0 0 0 / 0.15), 0px 2px 3px 0px rgb(0 0 0 / 0.30);
  --md-sys-elevation-level-5: 0px 8px 12px 6px rgb(0 0 0 / 0.15), 0px 4px 4px 0px rgb(0 0 0 / 0.30);
}
[data-theme="dark"] {
  --md-sys-elevation-level-1: 0px 1px 2px 0px rgb(0 0 0 / 0.50), 0px 1px 3px 1px rgb(0 0 0 / 0.30);
  --md-sys-elevation-level-2: 0px 1px 2px 0px rgb(0 0 0 / 0.50), 0px 2px 6px 2px rgb(0 0 0 / 0.30);
  --md-sys-elevation-level-3: 0px 4px 8px 3px rgb(0 0 0 / 0.30), 0px 1px 3px 0px rgb(0 0 0 / 0.50);
  --md-sys-elevation-level-4: 0px 6px 10px 4px rgb(0 0 0 / 0.30), 0px 2px 3px 0px rgb(0 0 0 / 0.50);
  --md-sys-elevation-level-5: 0px 8px 12px 6px rgb(0 0 0 / 0.30), 0px 4px 4px 0px rgb(0 0 0 / 0.50);
}

/* --------- Motion --------- */
:root {
  --md-sys-motion-easing-linear: linear;
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-easing-legacy: cubic-bezier(0.4, 0, 0.2, 1);

  --md-sys-motion-duration-short1: 50ms;
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-short3: 150ms;
  --md-sys-motion-duration-short4: 200ms;
  --md-sys-motion-duration-medium1: 250ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-medium3: 350ms;
  --md-sys-motion-duration-medium4: 400ms;
  --md-sys-motion-duration-long1: 450ms;
  --md-sys-motion-duration-long2: 500ms;
  --md-sys-motion-duration-long3: 550ms;
  --md-sys-motion-duration-long4: 600ms;
  --md-sys-motion-duration-extra-long1: 700ms;
  --md-sys-motion-duration-extra-long2: 800ms;
  --md-sys-motion-duration-extra-long3: 900ms;
  --md-sys-motion-duration-extra-long4: 1000ms;
}

/* --------- Typography — Multi-language stack ---------
   Default (Latin + Vietnamese + Indonesian): Plus Jakarta Sans + Be Vietnam Pro fallback.
   Per-language override qua [lang="..."] attribute trên <html>:
     zh → Noto Sans SC + system CJK
     hi → Noto Sans Devanagari + Hind
     ar → Noto Sans Arabic + Cairo (RTL)
*/
:root {
  --md-sys-typescale-font: 'Plus Jakarta Sans', 'Be Vietnam Pro', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --md-sys-typescale-display-font: 'Plus Jakarta Sans', 'Be Vietnam Pro', system-ui, sans-serif;
  --md-sys-typescale-mono-font: 'JetBrains Mono', ui-monospace, monospace;
}

/* Chinese Simplified (zh) — Noto Sans SC + native fallback Apple/Microsoft */
html[lang="zh"], html[lang="zh"] body,
:lang(zh) {
  --md-sys-typescale-font: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Microsoft Jhenghei', sans-serif;
  --md-sys-typescale-display-font: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* Hindi (Devanagari) — Noto Sans Devanagari + Hind fallback */
html[lang="hi"], html[lang="hi"] body,
:lang(hi) {
  --md-sys-typescale-font: 'Noto Sans Devanagari', 'Hind', 'Mukta', 'Plus Jakarta Sans', system-ui, sans-serif;
  --md-sys-typescale-display-font: 'Noto Sans Devanagari', 'Hind', 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* Arabic (RTL) — Noto Sans Arabic + Cairo + Tajawal */
html[lang="ar"], html[lang="ar"] body,
:lang(ar) {
  --md-sys-typescale-font: 'Noto Sans Arabic', 'Cairo', 'Tajawal', 'Plus Jakarta Sans', system-ui, sans-serif;
  --md-sys-typescale-display-font: 'Noto Sans Arabic', 'Cairo', 'Plus Jakarta Sans', system-ui, sans-serif;
}
html[lang="ar"], html[dir="rtl"] {
  direction: rtl;
}
html[lang="ar"] body { text-align: right; }

/* Display class — kế thừa font + tracking siết cho weight nặng */
.m3-display-large,
.m3-display-medium,
.m3-display-small,
.m3-display-large-em,
.m3-display-medium-em {
  font-family: var(--md-sys-typescale-display-font);
  letter-spacing: -0.02em;
}
.m3-display-large-em,
.m3-display-medium-em { letter-spacing: -0.03em; }

/* CJK / Devanagari / Arabic không nên dùng tracking âm — bỏ override */
:lang(zh) .m3-display-large,    :lang(zh) .m3-display-medium,    :lang(zh) .m3-display-small,
:lang(zh) .m3-display-large-em, :lang(zh) .m3-display-medium-em,
:lang(hi) .m3-display-large,    :lang(hi) .m3-display-medium,    :lang(hi) .m3-display-small,
:lang(hi) .m3-display-large-em, :lang(hi) .m3-display-medium-em,
:lang(ar) .m3-display-large,    :lang(ar) .m3-display-medium,    :lang(ar) .m3-display-small,
:lang(ar) .m3-display-large-em, :lang(ar) .m3-display-medium-em {
  letter-spacing: 0;
}

html {
  font-family: var(--md-sys-typescale-font);
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface);
}

body {
  font: 400 16px/24px var(--md-sys-typescale-font);
  letter-spacing: 0.5px;
  margin: 0;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  transition: background 250ms var(--md-sys-motion-easing-standard);
}

/* --------- Anchor reset (M3 không dùng underline mặc định) ---------
   Dùng :where() để hạ specificity → 0, cho phép class .m3-btn-* override color. */
:where(a, a:link, a:visited) {
  text-decoration: none;
  color: inherit;
}
a {
  transition: color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
a:hover { text-decoration: none; }
a:focus-visible {
  outline: 3px solid var(--md-sys-color-secondary);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Underline chỉ trong body article (post detail / blog content) — opt-in */
.m3-prose a {
  text-decoration: underline;
  text-decoration-color: var(--md-sys-color-primary);
  text-underline-offset: 3px;
  color: var(--md-sys-color-primary);
}

/* --------- Reduced motion --------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}