/* public/assets/css/themes.css
   KHMER HRMS — Day/Night Mode + Color Theme System
   Season: S00 — Project Zero Setup
   Reference: Master Reference Section 6.2 (Day/Night) + 6.4 (Color Themes)

   RULE: Every screen, in every season, must render correctly in both
   modes using ONLY these CSS variables. Never hardcode a color in a
   view or component stylesheet — reference var(--bg), var(--text),
   var(--primary), etc. instead.
*/

/* ── Day / Night Mode ─────────────────────────────────────────── */
body[data-theme="light"] {
    --bg:            #FFFFFF;
    --surface:       #F5F5F7;
    --surface-alt:   #EDEEF2;
    --text:          #1A1A2E;
    --text-muted:    #6B7280;
    --border:        #E2E4E9;
    --shadow-ambient: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-contact: 0 1px 1px rgba(16, 24, 40, 0.08);
}

body[data-theme="dark"] {
    --bg:            #0D0D1A;
    --surface:       #1A1A2E;
    --surface-alt:   #22223A;
    --text:          #E8E8F0;
    --text-muted:    #9CA3AF;
    --border:        #2E2E48;
    --shadow-ambient: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-contact: 0 1px 1px rgba(0, 0, 0, 0.45);
}

/* ── Color Themes (5 options — Section 6.4) ──────────────────── */
/* Default is BLUE; body[data-color-theme] switches the accent set. */
body,
body[data-color-theme="BLUE"] {
    --primary: #2563EB;
    --accent:  #3B82F6;
}
body[data-color-theme="GREEN"] {
    --primary: #16A34A;
    --accent:  #22C55E;
}
body[data-color-theme="RED"] {
    --primary: #DC2626;
    --accent:  #EF4444;
}
body[data-color-theme="GOLD"] {
    --primary: #D97706;
    --accent:  #F59E0B;
}
body[data-color-theme="PURPLE"] {
    --primary: #7C3AED;
    --accent:  #8B5CF6;
}

/* ── Status Colors (theme-independent, used by badges etc.) ─── */
:root {
    --success: #16A34A;
    --warning: #D97706;
    --danger:  #DC2626;
    --info:    #2563EB;
}

/* ── @font-face — local font files only (Rule #10, zero CDN) ──
   These reference the exact filenames documented in
   public/assets/fonts/README.md — run download_fonts.bat in that
   folder once to fetch the real font binaries. Each face lists
   woff2 first (smaller, what every evergreen browser uses) with a
   ttf fallback for maximum compatibility, matching how Moul-Regular
   and NotoSansKhmer-Regular already shipped in this project.
   font-display: swap avoids invisible text while loading.

   Font roles (Khmer + English):
     Battambang      → default Khmer UI font — body text, labels, tables
     NotoSansKhmer   → fallback Khmer face (full glyph coverage safety net)
     Moul            → engraved/decorative Khmer — page titles, stat
                        numbers, staff cards, certificates (Premium UI §4)
     Barlow          → default English UI font — body text, labels
     Inter           → heavier English face for page titles + stat
                        numbers only, paired with Moul (Premium UI §4) —
                        never used for English body text */

/* Battambang — Khmer body/UI font */
@font-face {
    font-family: 'Battambang';
    src: url('../fonts/Battambang-Regular.woff2') format('woff2'),
         url('../fonts/Battambang-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Battambang';
    src: url('../fonts/Battambang-Bold.woff2') format('woff2'),
         url('../fonts/Battambang-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

/* NotoSansKhmer — Khmer fallback face (full glyph coverage) */
@font-face {
    font-family: 'NotoSansKhmer';
    src: url('../fonts/NotoSansKhmer-Regular.woff2') format('woff2'),
         url('../fonts/NotoSansKhmer-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'NotoSansKhmer';
    src: url('../fonts/NotoSansKhmer-Bold.woff2') format('woff2'),
         url('../fonts/NotoSansKhmer-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

/* Moul — engraved/decorative Khmer (titles, cards, certificates) */
@font-face {
    font-family: 'Moul';
    src: url('../fonts/Moul-Regular.woff2') format('woff2'),
         url('../fonts/Moul-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

/* Barlow — English body/UI font */
@font-face {
    font-family: 'Barlow';
    src: url('../fonts/Barlow-Regular.woff2') format('woff2'),
         url('../fonts/Barlow-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Barlow';
    src: url('../fonts/Barlow-SemiBold.woff2') format('woff2'),
         url('../fonts/Barlow-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Barlow';
    src: url('../fonts/Barlow-Bold.woff2') format('woff2'),
         url('../fonts/Barlow-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

/* Inter — English heading/stat-number face only */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Regular.woff2') format('woff2'),
         url('../fonts/Inter-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-SemiBold.woff2') format('woff2'),
         url('../fonts/Inter-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Bold.woff2') format('woff2'),
         url('../fonts/Inter-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

/* ── Fonts (Section 6.1) ──────────────────────────────────────── */
:root {
    /* Body-text stacks — switched by the user's font_style setting */
    --font-kh:          'NotoSansKhmer', 'Battambang', sans-serif;
    --font-kh-engraved: 'NotoSansKhmer', 'Battambang', 'Moul', serif;
    --font-en:          'Barlow', sans-serif;

    /* Heading-only stack — ALWAYS Moul (Khmer) + Inter (English),
       regardless of the body font_style toggle (Premium UI §4:
       "never body text"). See h1/h2/.stat-number/.font-title-kh
       rule in app.css. */
    --font-kh-heading:  'NotoSansKhmer', 'Battambang', 'Moul', serif;
    --font-en-heading:  'Inter', sans-serif;
}
body[data-font="normal"], body[data-font="engraved"] { font-family: var(--font-en), var(--font-kh), sans-serif; }

/* ── Theme Sizes (Section 6.3) ────────────────────────────────── */
body[data-size="sm"] { font-size: 13px; }
body[data-size="md"] { font-size: 15px; }
body[data-size="lg"] { font-size: 17px; }
body[data-size="xl"] { font-size: 19px; }
body[data-size="xxl"] { font-size: 21px; }


/* S31 — User-selectable typography. English is listed first so Latin glyphs
   use the chosen English face while Khmer glyphs fall through to the chosen
   Khmer face. Heading variables follow the same user choices. */
body[data-khmer-font="BATTAMBANG"] { --selected-khmer-font: 'Battambang'; }
body[data-khmer-font="NOTO_SANS_KHMER"] { --selected-khmer-font: 'NotoSansKhmer'; }
body[data-khmer-font="MOUL"] { --selected-khmer-font: 'Moul'; }
body[data-khmer-font="SYSTEM_KHMER"] { --selected-khmer-font: system-ui, sans-serif; }
body[data-english-font="BARLOW"] { --selected-english-font: 'Barlow'; }
body[data-english-font="INTER"] { --selected-english-font: 'Inter'; }
body[data-english-font="ARIAL"] { --selected-english-font: Arial, Helvetica, sans-serif; }
body[data-english-font="GEORGIA"] { --selected-english-font: Georgia, 'Times New Roman', serif; }
body[data-english-font="VERDANA"] { --selected-english-font: Verdana, Geneva, sans-serif; }
body {
    --font-kh: var(--selected-khmer-font, 'Battambang'), 'NotoSansKhmer', sans-serif;
    --font-kh-engraved: var(--selected-khmer-font, 'Battambang'), 'NotoSansKhmer', 'Moul', serif;
    --font-en: var(--selected-english-font, 'Barlow'), Arial, sans-serif;
    --font-kh-heading: var(--selected-khmer-font, 'Battambang'), 'NotoSansKhmer', 'Moul', serif;
    --font-en-heading: var(--selected-english-font, 'Barlow'), Arial, sans-serif;
    font-family: var(--font-en), var(--font-kh), sans-serif;
}
body[data-color-theme="CUSTOM"] {
    --primary: var(--custom-primary, #2563EB);
    --accent: color-mix(in srgb, var(--custom-primary, #2563EB) 82%, white);
}
body[data-color-theme="CUSTOM"] { --custom-primary: var(--user-custom-color, #2563EB); }

/* ── Smooth transition when toggling day/night (Premium UI §3) ─ */
body,
body * {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}