/* ==========================================================================
   PWMP MIS — design tokens
   Palette sampled directly from the PWMP emblem: leaf green (#007800–#189000),
   deep navy (#001860) and the recycling blue (#0048A8–#0060C0).
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ---- Brand ------------------------------------------------------------ */
  --green-50:  #eaf7ed;
  --green-100: #cbecd4;
  --green-200: #a3ddb2;
  --green-300: #6fc985;
  --green-400: #3fb45f;
  --green-500: #17953c;   /* primary */
  --green-600: #118032;
  --green-700: #0c6727;
  --green-800: #084d1d;
  --green-900: #053613;

  --blue-50:   #e8f1fd;
  --blue-100:  #c8dcf9;
  --blue-200:  #9ec1f3;
  --blue-300:  #6ba1ec;
  --blue-400:  #3b82e0;
  --blue-500:  #0b5fc0;   /* secondary */
  --blue-600:  #094fa2;
  --blue-700:  #073e80;
  --blue-800:  #052c5c;
  --blue-900:  #041f42;

  --navy-500:  #0b2a6b;
  --navy-700:  #071c48;
  --navy-900:  #04122e;

  /* ---- Semantic --------------------------------------------------------- */
  --amber-100: #fdf0d5; --amber-500: #e8a33d; --amber-700: #a86f18;
  --red-100:   #fbe4e1; --red-500:   #c0392b; --red-700:   #8c2419;
  --teal-500:  #0e9a9a;
  --violet-500:#7c4dbe;
  --pink-500:  #d4577a;

  /* ---- Typography ------------------------------------------------------- */
  /* Noto Serif Lao is the standard for every piece of Lao text.
     Inter is listed first in --font-body only to carry Latin and numerals: it has no
     Lao glyphs, so Lao characters fall through to Noto Serif Lao character by
     character. Noto Sans Lao is not bundled and must not be reintroduced. */
  --font-display: 'Noto Serif Lao', 'Noto Serif', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', 'Noto Serif Lao', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-lao: 'Noto Serif Lao', serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --fs-2xs: .6875rem;  /* 11 */
  --fs-xs:  .75rem;    /* 12 */
  --fs-sm:  .8125rem;  /* 13 */
  --fs-base:.875rem;   /* 14 */
  --fs-md:  .9375rem;  /* 15 */
  --fs-lg:  1.0625rem; /* 17 */
  --fs-xl:  1.25rem;   /* 20 */
  --fs-2xl: 1.5rem;    /* 24 */
  --fs-3xl: 1.875rem;  /* 30 */
  --fs-4xl: 2.375rem;  /* 38 */

  /* Lao script needs more vertical room than Latin for its stacked marks. */
  --lh-tight: 1.4;
  --lh-base:  1.65;
  --lh-loose: 1.85;

  /* ---- Spacing / radii / motion ----------------------------------------- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;

  --r-xs: 6px;  --r-sm: 9px;  --r-md: 12px;
  --r-lg: 16px; --r-xl: 22px; --r-full: 999px;

  --ease-out:  cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: .16s; --dur-base: .26s; --dur-slow: .45s;

  --sidebar-w: 268px;
  --sidebar-w-collapsed: 76px;
  --topbar-h: 62px;
  --tabbar-h: 66px;
  --content-max: 1600px;

  /* ---- Light surfaces ---------------------------------------------------- */
  --bg:          #f4f7f5;
  --bg-alt:      #eef2ef;
  --surface:     #ffffff;
  --surface-2:   #fafbfa;
  --surface-3:   #f2f5f3;
  --surface-inset: #f7f9f8;

  --text:        #131a17;
  --text-muted:  #5b6763;
  --text-subtle: #85918c;
  --text-invert: #ffffff;

  --border:      #e0e6e2;
  --border-strong:#c9d2cd;
  --divider:     #edf1ee;

  --primary:      var(--green-500);
  --primary-hover:var(--green-600);
  --primary-soft: var(--green-50);
  --primary-text: #ffffff;
  --secondary:    var(--blue-500);
  --secondary-soft: var(--blue-50);

  --success: var(--green-500); --success-soft: var(--green-50);  --success-text: var(--green-700);
  --info:    var(--blue-500);  --info-soft:    var(--blue-50);   --info-text:    var(--blue-700);
  --warning: var(--amber-500); --warning-soft: var(--amber-100); --warning-text: var(--amber-700);
  --danger:  var(--red-500);   --danger-soft:  var(--red-100);   --danger-text:  var(--red-700);
  --neutral: #7a8681;          --neutral-soft: #eef1ef;          --neutral-text: #4a5450;

  --sidebar-bg:   linear-gradient(168deg, #073a1c 0%, #06381f 34%, #062f4a 78%, #052a52 100%);
  --sidebar-text: #d5e6dc;
  --sidebar-muted:#8fae9d;
  --sidebar-active-bg: rgba(255,255,255,.13);
  --sidebar-hover-bg:  rgba(255,255,255,.07);

  --brand-gradient: linear-gradient(120deg, var(--green-500) 0%, var(--green-400) 26%, var(--blue-500) 82%);
  --brand-gradient-soft: linear-gradient(120deg, var(--green-50) 0%, var(--blue-50) 100%);

  --shadow-xs: 0 1px 2px rgba(6, 34, 22, .06);
  --shadow-sm: 0 1px 3px rgba(6, 34, 22, .07), 0 1px 2px rgba(6, 34, 22, .04);
  --shadow-md: 0 4px 14px rgba(6, 34, 22, .08), 0 1px 3px rgba(6, 34, 22, .05);
  --shadow-lg: 0 12px 32px rgba(6, 34, 22, .12), 0 2px 8px rgba(6, 34, 22, .06);
  --shadow-xl: 0 24px 56px rgba(6, 34, 22, .16), 0 4px 12px rgba(6, 34, 22, .08);
  --shadow-focus: 0 0 0 3px rgba(23, 149, 60, .22);

  --scrim: rgba(9, 27, 19, .48);
}

/* ---- Dark theme: explicit choice wins in both directions ----------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="dark"] { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0c1210;
    --bg-alt:    #0a0f0d;
    --surface:   #141c19;
    --surface-2: #182220;
    --surface-3: #1e2926;
    --surface-inset: #101715;

    --text:        #e7efea;
    --text-muted:  #9aa8a2;
    --text-subtle: #6f7c77;

    --border:      #253430;
    --border-strong:#33453f;
    --divider:     #1c2825;

    --primary: #3fb45f; --primary-hover: #58c476; --primary-soft: rgba(63,180,95,.14); --primary-text: #04140a;
    --secondary: #4d95e8; --secondary-soft: rgba(77,149,232,.14);

    --success: #3fb45f; --success-soft: rgba(63,180,95,.14);  --success-text: #7fd396;
    --info:    #4d95e8; --info-soft:    rgba(77,149,232,.14); --info-text:    #8fbcf0;
    --warning: #e0a95a; --warning-soft: rgba(224,169,90,.14); --warning-text: #eec48c;
    --danger:  #e06a5c; --danger-soft:  rgba(224,106,92,.14); --danger-text:  #efa298;
    --neutral: #7d8a85; --neutral-soft: rgba(125,138,133,.16);--neutral-text: #a6b2ad;

    --sidebar-bg: linear-gradient(168deg, #052213 0%, #051f16 40%, #041b2c 100%);
    --sidebar-text: #c8ddd2;
    --sidebar-muted:#7d9c8c;

    --brand-gradient-soft: linear-gradient(120deg, rgba(63,180,95,.14) 0%, rgba(77,149,232,.14) 100%);

    --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3);
    --shadow-md: 0 4px 14px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.35);
    --shadow-lg: 0 12px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
    --shadow-xl: 0 24px 56px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.45);
    --shadow-focus: 0 0 0 3px rgba(63,180,95,.3);
    --scrim: rgba(0,0,0,.66);
  }
}

:root[data-theme="dark"] {
  --bg:        #0c1210;
  --bg-alt:    #0a0f0d;
  --surface:   #141c19;
  --surface-2: #182220;
  --surface-3: #1e2926;
  --surface-inset: #101715;

  --text:        #e7efea;
  --text-muted:  #9aa8a2;
  --text-subtle: #6f7c77;

  --border:      #253430;
  --border-strong:#33453f;
  --divider:     #1c2825;

  --primary: #3fb45f; --primary-hover: #58c476; --primary-soft: rgba(63,180,95,.14); --primary-text: #04140a;
  --secondary: #4d95e8; --secondary-soft: rgba(77,149,232,.14);

  --success: #3fb45f; --success-soft: rgba(63,180,95,.14);  --success-text: #7fd396;
  --info:    #4d95e8; --info-soft:    rgba(77,149,232,.14); --info-text:    #8fbcf0;
  --warning: #e0a95a; --warning-soft: rgba(224,169,90,.14); --warning-text: #eec48c;
  --danger:  #e06a5c; --danger-soft:  rgba(224,106,92,.14); --danger-text:  #efa298;
  --neutral: #7d8a85; --neutral-soft: rgba(125,138,133,.16);--neutral-text: #a6b2ad;

  --sidebar-bg: linear-gradient(168deg, #052213 0%, #051f16 40%, #041b2c 100%);
  --sidebar-text: #c8ddd2;
  --sidebar-muted:#7d9c8c;

  --brand-gradient-soft: linear-gradient(120deg, rgba(63,180,95,.14) 0%, rgba(77,149,232,.14) 100%);

  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 4px 14px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.35);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
  --shadow-xl: 0 24px 56px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.45);
  --shadow-focus: 0 0 0 3px rgba(63,180,95,.3);
  --scrim: rgba(0,0,0,.66);
}

/* ==========================================================================
   Reading preferences (Profile → Display). Set on <html> before first paint.
   Every size in the system is rem-based, so the text-size step scales type and
   spacing together — like zooming, without breaking the layout. Weights are
   real: both fonts are variable (100–900).
   ========================================================================== */
:root { --fw-body: 400; --fw-strong: 600; }
html[data-text-size="sm"]  { font-size: 87.5%; }
html[data-text-size="lg"]  { font-size: 112.5%; }
html[data-text-size="xl"]  { font-size: 125%; }
html[data-text-size="xxl"] { font-size: 140%; }

html[data-text-weight="light"]  { --fw-body: 300; --fw-strong: 560; }
html[data-text-weight="medium"] { --fw-body: 500; --fw-strong: 700; }
html[data-text-weight="bold"]   { --fw-body: 600; --fw-strong: 800; }
body { font-weight: var(--fw-body); }
b, strong { font-weight: var(--fw-strong); }

html[data-line-spacing="compact"] { --lh-tight: 1.3; --lh-base: 1.5; --lh-loose: 1.7; }
html[data-line-spacing="relaxed"] { --lh-tight: 1.55; --lh-base: 1.9; --lh-loose: 2.1; }

/* "Reduce motion" chosen in the profile, for devices that do not report it. */
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after {
  animation-duration: .01ms !important; animation-iteration-count: 1 !important;
  transition-duration: .01ms !important; scroll-behavior: auto !important;
}
html[data-motion="reduced"] .reveal { opacity: 1; transform: none; }