/* MOODA UI v0.5.0 | CSS-only theme for Mooda MDE */
:root {
  color-scheme:light;
  /* Brand */
  --mooda-primary-50:#EAF9FF;
  --mooda-primary-100:#D2F2FF;
  --mooda-primary-200:#A6E6FA;
  --mooda-primary-300:#70D4F2;
  --mooda-primary-400:#35BDE9;
  --mooda-primary-500:#009EDB;
  --mooda-primary-600:#009EDB;
  --mooda-primary-700:#0087BC;
  --mooda-primary-800:#08719A;
  --mooda-primary-900:#105C78;

  /* MOODA brand anchors — identical in every theme */
  --mooda-brand-blue:#009EDB;
  --mooda-brand-orange:#F47529;
  --ui-brand-blue:var(--mooda-brand-blue);
  --ui-brand-orange:var(--mooda-brand-orange);

  /* Caution yellow — distinct from the orange Warning family */
  --mooda-caution-50:#FFFBEA;
  --mooda-caution-100:#FFF4BF;
  --mooda-caution-200:#FFE887;
  --mooda-caution-300:#FAD65C;
  --mooda-caution-400:#F7CA48;
  --mooda-caution-500:#F5C542;
  --mooda-caution-600:#D9A91F;
  --mooda-caution-700:#AE7E13;
  --mooda-caution-800:#8B6215;
  --mooda-caution-900:#735016;

  --mooda-gray-0:#FFFFFF;
  --mooda-gray-50:#F7F9FC;
  --mooda-gray-100:#F1F4F8;
  --mooda-gray-200:#E5EAF0;
  --mooda-gray-300:#D2DAE4;
  --mooda-gray-400:#AAB6C5;
  --mooda-gray-500:#7B899B;
  --mooda-gray-600:#5D6A7C;
  --mooda-gray-700:#424D5E;
  --mooda-gray-800:#293343;
  --mooda-gray-900:#172033;

  /* Semantic */
  --ui-bg:#F3F6F8;
  --ui-surface:#FFFFFF;
  --ui-surface-subtle:#F7F9FA;
  --ui-text:#1C2733;
  --ui-text-secondary:#526170;
  --ui-text-muted:#687887;
  --ui-border:#CCD6DE;
  --ui-border-subtle:#E1E7EC;
  --ui-primary:#009EDB;
  --ui-primary-text:#007596;
  --ui-primary-fill:#007BA5;
  --ui-primary-hover:#006D92;
  --ui-primary-soft:#E8F6FA;
  --ui-primary-border:#B9DFEA;
  --ui-info:#397C91;
  --ui-info-fill:#C8DEE5;
  --ui-info-text:#315F70;
  --ui-info-soft:#EFF6F8;
  --ui-info-border:#CEE0E6;
  --ui-success:#3D765A;
  --ui-success-fill:#C7DDCF;
  --ui-success-soft:#F0F6F2;
  --ui-success-border:#D0E1D6;
  --ui-caution:#7D682F;
  --ui-caution-fill:#E8DDAF;
  --ui-caution-soft:#FAF7ED;
  --ui-caution-text:#6C5927;
  --ui-caution-border:#E7DEBF;
  --ui-warning:#9A5D32;
  --ui-warning-fill:#E6C8AE;
  --ui-warning-soft:#FAF3ED;
  --ui-warning-border:#E7D2C1;
  --ui-danger:#A34F56;
  --ui-danger-fill:#E7C4C7;
  --ui-danger-soft:#FAF0F1;
  --ui-danger-border:#E7CDD0;
  --ui-neutral:#5D6975;
  --ui-neutral-fill:#D8DEE3;
  --ui-neutral-soft:#F0F3F5;
  --ui-on-primary:#F6FCFF;
  --ui-on-info:#214B5A;
  --ui-on-success:#244B37;
  --ui-on-caution:#4B3F1D;
  --ui-on-warning:#56351F;
  --ui-on-danger:#572D31;
  --ui-on-neutral:#34404B;
  --ui-focus-ring:rgba(0,158,219,.22);
  --ui-overlay:rgba(20,33,48,.42);
  --ui-control-thumb:#FFFFFF;
  --ui-gate-bg-start:#53BDD8;
  --ui-gate-bg-end:#009EDB;

  /* Spacing – 4px grid */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;

  /* Radius */
  --radius-xs:4px;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:14px;
  --radius-xl:20px;
  --radius-2xl:24px;
  --radius-full:9999px;
  --radius-control:10px;
  --radius-gate-control:23px;

  /* Shadow */
  --shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --shadow-sm:0 2px 6px rgba(16,24,40,.06);
  --shadow-md:0 8px 24px rgba(16,24,40,.08);
  --shadow-lg:0 16px 40px rgba(16,24,40,.12);

  /* Controls */
  --control-xs:28px;
  --control-sm:32px;
  --control-md:40px;
  --control-lg:48px;
  --control-xl:56px;

  /* Z-index */
  --z-dropdown:1000;
  --z-popover:1100;
  --z-drawer:1200;
  --z-dialog:1300;
  --z-toast:1400;

  /* Motion */
  --motion-fast:120ms;
  --motion-normal:180ms;
  --motion-slow:260ms;

  --font-family:Inter,"Noto Sans Thai",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* MDE owns theme selection. MOODA UI only supplies the semantic palette. */
html[data-mde-theme="comfort"] {
  color-scheme:light;
  --ui-bg:#E9EEEC;
  --ui-surface:#F4F6F2;
  --ui-surface-subtle:#EEF2EE;
  --ui-text:#26312F;
  --ui-text-secondary:#53625E;
  --ui-text-muted:#64736E;
  --ui-border:#C7D0CB;
  --ui-border-subtle:#DCE3DF;
  --ui-primary:#009EDB;
  --ui-primary-text:#006F90;
  --ui-primary-fill:#007594;
  --ui-primary-hover:#006680;
  --ui-primary-soft:#E0F0F2;
  --ui-primary-border:#ADD6DE;
  --ui-info:#3D7485;
  --ui-info-fill:#BFD4D9;
  --ui-info-text:#315F6D;
  --ui-info-soft:#EAF1F1;
  --ui-info-border:#C8D9DA;
  --ui-success:#426E58;
  --ui-success-fill:#C6D7CC;
  --ui-success-soft:#EDF2EE;
  --ui-success-border:#CFDCD3;
  --ui-caution:#74612F;
  --ui-caution-fill:#DFD5AA;
  --ui-caution-soft:#F4F1E7;
  --ui-caution-text:#635226;
  --ui-caution-border:#DDD6BB;
  --ui-warning:#94552F;
  --ui-warning-fill:#E2C3AF;
  --ui-warning-soft:#F4EDE8;
  --ui-warning-border:#DFCBBE;
  --ui-danger:#965158;
  --ui-danger-fill:#DFC3C6;
  --ui-danger-soft:#F3EBEC;
  --ui-danger-border:#DDC9CB;
  --ui-neutral:#596763;
  --ui-neutral-fill:#D2D9D6;
  --ui-neutral-soft:#EBEFED;
  --ui-on-primary:#F2FAFC;
  --ui-on-info:#294D57;
  --ui-on-success:#2B4939;
  --ui-on-caution:#463B1C;
  --ui-on-warning:#50311F;
  --ui-on-danger:#522D31;
  --ui-on-neutral:#34413D;
  --ui-focus-ring:rgba(0,117,148,.20);
  --ui-overlay:rgba(27,39,36,.38);
  --ui-control-thumb:#F4F6F2;
  --ui-gate-bg-start:#3D9CB5;
  --ui-gate-bg-end:#087C9E;
}

html[data-mde-theme="dark"] {
  color-scheme:dark;
  --ui-bg:#10161D;
  --ui-surface:#171F28;
  --ui-surface-subtle:#1D2731;
  --ui-text:#D7DEE5;
  --ui-text-secondary:#AAB5BE;
  --ui-text-muted:#83909C;
  --ui-border:#3A4651;
  --ui-border-subtle:#2A3540;
  --ui-primary:#55A3BE;
  --ui-primary-text:#6CB1C8;
  --ui-primary-fill:#176E8E;
  --ui-primary-hover:#1B7B9D;
  --ui-primary-soft:rgba(85,163,190,.14);
  --ui-primary-border:rgba(85,163,190,.34);
  --ui-info:#6E96A4;
  --ui-info-fill:#315766;
  --ui-info-text:#8BB0BC;
  --ui-info-soft:rgba(110,150,164,.13);
  --ui-info-border:rgba(110,150,164,.32);
  --ui-success:#6E9B82;
  --ui-success-fill:#315F49;
  --ui-success-soft:rgba(110,155,130,.13);
  --ui-success-border:rgba(110,155,130,.32);
  --ui-caution:#AA955A;
  --ui-caution-fill:#6E5C2E;
  --ui-caution-soft:rgba(170,149,90,.13);
  --ui-caution-text:#C1AD72;
  --ui-caution-border:rgba(170,149,90,.32);
  --ui-warning:#B5845F;
  --ui-warning-fill:#70492E;
  --ui-warning-soft:rgba(181,132,95,.13);
  --ui-warning-border:rgba(181,132,95,.32);
  --ui-danger:#B9787D;
  --ui-danger-fill:#743E44;
  --ui-danger-soft:rgba(185,120,125,.13);
  --ui-danger-border:rgba(185,120,125,.32);
  --ui-neutral:#7E8A95;
  --ui-neutral-fill:#4D5964;
  --ui-neutral-soft:#252F39;
  --ui-on-primary:#F0F8FB;
  --ui-on-info:#E8F1F3;
  --ui-on-success:#EDF5F0;
  --ui-on-caution:#F5EBCB;
  --ui-on-warning:#F7EEE8;
  --ui-on-danger:#F8ECEE;
  --ui-on-neutral:#F0F3F5;
  --ui-focus-ring:rgba(85,163,190,.24);
  --ui-overlay:rgba(3,8,12,.66);
  --ui-control-thumb:#D7DEE5;
  --ui-gate-bg-start:#1A3B49;
  --ui-gate-bg-end:#122A35;
}