/* ==========================================================================
   JelPOS — themes.css
   17 built-in themes as CSS custom properties.
   Source of truth: the spec-Modules/ §4 (Theme Selection).

   Every theme defines the SAME variable contract (see :root below). Component
   styles in main.css consume ONLY these variables — never hardcoded hex.
   Switch theme at runtime with:
       document.documentElement.setAttribute('data-theme', name)

   Design discipline (taste-skill principles, stack-agnostic):
   - ONE accent per theme, locked across the whole UI. No mid-page hue drift.
   - Neutral bases + a single high-contrast accent. No "AI purple" default.
   - Status colors (success/warning/danger) are theme-tuned but never the only
     signal — POS status also uses icon + label (color-blind safe).
   ========================================================================== */

/* ---- Variable contract + sane defaults (fallback = Morning, light) -------- */
:root {
  color-scheme: light;

  /* Surfaces */
  --bg:            #f5f7fa;   /* page background */
  --surface:       #ffffff;   /* cards, panels */
  --surface-2:     #eef2f7;   /* sunken / secondary surface */
  --surface-3:     #e3e9f1;   /* hover / pressed fills */
  --overlay:       rgba(16, 24, 40, 0.45); /* modal scrim */

  /* Lines */
  --border:        #d8e0ea;
  --border-strong: #b9c4d3;

  /* Text */
  --text:          #16202e;
  --text-muted:    #5b6b7e;
  --text-faint:    #8a98a8;
  --text-on-primary: #ffffff;
  --text-on-accent:  #ffffff;

  /* Brand */
  --primary:       #2f6fed;
  --primary-hover: #2560d6;
  --primary-soft:  #e6efff;   /* tinted background of primary */
  --accent:        #2f6fed;
  --accent-soft:   #e6efff;

  /* Status (semantic) */
  --success:       #1c8a4e;  --success-soft: #e2f5ea;
  --warning:       #b9770a;  --warning-soft: #fcf1da;
  --danger:        #cc2f3b;  --danger-soft:  #fbe3e5;
  --info:          #1f72c4;  --info-soft:    #e4f0fb;

  /* Radius scale — SHAPE LOCK: cards 14px, controls 12px, chips/pills full */
  --radius-sm:   8px;
  --radius:      12px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* Elevation — shadows tinted to surface, never pure black */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.10), 0 2px 4px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.16), 0 4px 8px rgba(16, 24, 40, 0.08);

  /* Focus ring (a11y — always visible, never removed) */
  --ring: 0 0 0 3px color-mix(in srgb, var(--primary) 40%, transparent);
}

/* ============================= LIGHT THEMES ============================== */

:root[data-theme="morning"] { color-scheme: light;
  --bg:#f5f7fa; --surface:#ffffff; --surface-2:#eef2f7; --surface-3:#e3e9f1; --overlay:rgba(16,24,40,.45);
  --border:#d8e0ea; --border-strong:#b9c4d3;
  --text:#16202e; --text-muted:#5b6b7e; --text-faint:#8a98a8; --text-on-primary:#fff; --text-on-accent:#fff;
  --primary:#2f6fed; --primary-hover:#2560d6; --primary-soft:#e6efff; --accent:#2f6fed; --accent-soft:#e6efff;
}

:root[data-theme="ivory"] { color-scheme: light;
  --bg:#faf7f1; --surface:#fffdf8; --surface-2:#f3eee3; --surface-3:#ebe3d4; --overlay:rgba(43,33,20,.42);
  --border:#e6ddca; --border-strong:#cdbf9f;
  --text:#2a241a; --text-muted:#6e6450; --text-faint:#9c907a; --text-on-primary:#fff; --text-on-accent:#fff;
  --primary:#bf5a37; --primary-hover:#a64a2c; --primary-soft:#f6e3da; --accent:#bf5a37; --accent-soft:#f6e3da;
  --success:#2c7d4f; --success-soft:#e0f0e7; --warning:#b07407; --warning-soft:#f7ebd4;
  --danger:#c33b32; --danger-soft:#f8e0dd; --info:#3a6ea8; --info-soft:#e2ecf6;
}

:root[data-theme="sand"] { color-scheme: light;
  --bg:#f4ede0; --surface:#fdf9f1; --surface-2:#ece1cd; --surface-3:#e1d3b8; --overlay:rgba(48,38,22,.42);
  --border:#ddccae; --border-strong:#c2ab85;
  --text:#33291a; --text-muted:#6f6147; --text-faint:#9a8a6c; --text-on-primary:#fff; --text-on-accent:#2a2113;
  --primary:#a8651f; --primary-hover:#8f5519; --primary-soft:#f1e2c8; --accent:#7c7a2e; --accent-soft:#ececc9;
  --success:#5a7d1f; --success-soft:#e8efd5; --warning:#a8651f; --warning-soft:#f3e3c9;
  --danger:#bb3d2c; --danger-soft:#f5ddd7; --info:#3f6f8c; --info-soft:#e2ecf1;
}

:root[data-theme="mint"] { color-scheme: light;
  --bg:#eef8f4; --surface:#ffffff; --surface-2:#e0f1ea; --surface-3:#cdeae0; --overlay:rgba(10,40,32,.42);
  --border:#c4e6da; --border-strong:#9bd3c1;
  --text:#103027; --text-muted:#3f6b5f; --text-faint:#6f968a; --text-on-primary:#fff; --text-on-accent:#fff;
  --primary:#0f9d75; --primary-hover:#0c8765; --primary-soft:#d6f3e9; --accent:#0f9d75; --accent-soft:#d6f3e9;
  --success:#0f9d75; --success-soft:#d6f3e9; --warning:#b07a08; --warning-soft:#f6ebd2;
  --danger:#cc3a44; --danger-soft:#fadfe1; --info:#1d83b8; --info-soft:#dceef7;
}

:root[data-theme="blush"] { color-scheme: light;
  --bg:#fbf2f5; --surface:#ffffff; --surface-2:#f6e3ea; --surface-3:#f0d3de; --overlay:rgba(48,16,28,.42);
  --border:#f0d2dc; --border-strong:#e0a9bc;
  --text:#2e1820; --text-muted:#74505d; --text-faint:#a37f8c; --text-on-primary:#fff; --text-on-accent:#fff;
  --primary:#d6336c; --primary-hover:#bd2a5e; --primary-soft:#fbe0ea; --accent:#d6336c; --accent-soft:#fbe0ea;
  --success:#1f8a55; --success-soft:#e2f3ea; --warning:#b9770a; --warning-soft:#f9edd6;
  --danger:#cc2f3b; --danger-soft:#fbe0e2; --info:#2f72c4; --info-soft:#e3edf8;
}

/* ============================== DARK THEMES ============================= */

:root[data-theme="midnight"] { color-scheme: dark;
  --bg:#0c1322; --surface:#141d30; --surface-2:#1c2740; --surface-3:#26334f; --overlay:rgba(0,0,0,.6);
  --border:#28344c; --border-strong:#3a4a68;
  --text:#e8eefb; --text-muted:#9fb0c9; --text-faint:#6c7d97; --text-on-primary:#06101f; --text-on-accent:#06101f;
  --primary:#4dabf7; --primary-hover:#6cbbf9; --primary-soft:#16273e; --accent:#4dabf7; --accent-soft:#16273e;
  --success:#36b37e; --success-soft:#13302a; --warning:#e0a020; --warning-soft:#322712;
  --danger:#f06a73; --danger-soft:#371a22; --info:#4dabf7; --info-soft:#16273e;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 6px 18px rgba(0,0,0,.5); --shadow-lg:0 16px 40px rgba(0,0,0,.6);
}

:root[data-theme="forest"] { color-scheme: dark;
  --bg:#0d1a12; --surface:#15271b; --surface-2:#1d3525; --surface-3:#274632; --overlay:rgba(0,0,0,.58);
  --border:#26412f; --border-strong:#375b43;
  --text:#e6f3e9; --text-muted:#a0c2ab; --text-faint:#6f9079; --text-on-primary:#06150c; --text-on-accent:#06150c;
  --primary:#7ab648; --primary-hover:#8cc659; --primary-soft:#1a3320; --accent:#7ab648; --accent-soft:#1a3320;
  --success:#5fbf6a; --success-soft:#13301c; --warning:#d6a01f; --warning-soft:#2f2712;
  --danger:#e8696f; --danger-soft:#33191c; --info:#4ea8d6; --info-soft:#132832;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 6px 18px rgba(0,0,0,.5); --shadow-lg:0 16px 40px rgba(0,0,0,.6);
}

:root[data-theme="slate"] { color-scheme: dark;
  --bg:#11151d; --surface:#1a212d; --surface-2:#232c3b; --surface-3:#2e3a4d; --overlay:rgba(0,0,0,.6);
  --border:#2c3848; --border-strong:#3f4f64;
  --text:#e7ecf4; --text-muted:#9aa8bd; --text-faint:#6b7889; --text-on-primary:#0a0e15; --text-on-accent:#0a0e15;
  --primary:#748ffc; --primary-hover:#8aa1fd; --primary-soft:#1e2740; --accent:#748ffc; --accent-soft:#1e2740;
  --success:#37b88a; --success-soft:#12302a; --warning:#dca52a; --warning-soft:#2f2814;
  --danger:#ef6b78; --danger-soft:#341a20; --info:#5aa9e6; --info-soft:#142a3d;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 6px 18px rgba(0,0,0,.5); --shadow-lg:0 16px 40px rgba(0,0,0,.6);
}

:root[data-theme="charcoal"] { color-scheme: dark;
  --bg:#161616; --surface:#1f1f1f; --surface-2:#292929; --surface-3:#363636; --overlay:rgba(0,0,0,.62);
  --border:#333; --border-strong:#4a4a4a;
  --text:#f0f0f0; --text-muted:#a6a6a6; --text-faint:#737373; --text-on-primary:#1a1500; --text-on-accent:#1a1500;
  --primary:#fab005; --primary-hover:#ffc01f; --primary-soft:#2e2606; --accent:#fab005; --accent-soft:#2e2606;
  --success:#51c878; --success-soft:#12301d; --warning:#fab005; --warning-soft:#2e2606;
  --danger:#f0676f; --danger-soft:#33191c; --info:#5cb3e6; --info-soft:#13283a;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow-md:0 6px 18px rgba(0,0,0,.55); --shadow-lg:0 16px 40px rgba(0,0,0,.65);
}

:root[data-theme="navy"] { color-scheme: dark;
  --bg:#0a1428; --surface:#102038; --surface-2:#172b4a; --surface-3:#21395e; --overlay:rgba(0,0,0,.6);
  --border:#1e3559; --border-strong:#2f4f7d;
  --text:#e6eefa; --text-muted:#9bb1d0; --text-faint:#6a83a6; --text-on-primary:#04101f; --text-on-accent:#04211a;
  --primary:#4dd4ac; --primary-hover:#62dcb8; --primary-soft:#0d2e2a; --accent:#4dd4ac; --accent-soft:#0d2e2a;
  --success:#4dd4ac; --success-soft:#0d2e2a; --warning:#e0a836; --warning-soft:#2e2713;
  --danger:#ef7079; --danger-soft:#341b22; --info:#5aa6e8; --info-soft:#122a44;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 6px 18px rgba(0,0,0,.5); --shadow-lg:0 16px 40px rgba(0,0,0,.6);
}

:root[data-theme="dark-wine"] { color-scheme: dark;
  /* Dark Wine — the landing's night mood ported to the app: deep wine-burgundy
     surfaces (the atmosphere) + an amber accent (the candlelight). Amber is the
     accessible on-dark accent — deep wine reads fine as a fill but fails contrast
     as text on near-black, so the wine lives in the surfaces, not the ink. */
  --bg:#17110e; --surface:#17110e; --surface-2:#1e1712; --surface-3:#2a201a; --overlay:rgba(0,0,0,.66);
  --border:#f4ebde; --border-strong:#f4ebde;
  --text:#f4ebde; --text-muted:#e8a53f; --text-faint:#a98f6b; --text-on-primary:#241608; --text-on-accent:#241608;
  --primary:#e8a53f; --primary-hover:#f2b658; --primary-soft:#2a1f0e; --accent:#e8a53f; --accent-soft:#2a1f0e;
  --success:#5fbf6a; --success-soft:#122a14; --warning:#e0902b; --warning-soft:#2f2312;
  --danger:#e0596a; --danger-soft:#361a20; --info:#5aa9e6; --info-soft:#132a3d;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow-md:0 6px 18px rgba(0,0,0,.55); --shadow-lg:0 16px 40px rgba(0,0,0,.65);
}

/* ========================== HIGH-CONTRAST THEMES ======================== */
/* Stronger borders, pure backgrounds, AAA-leaning text contrast.            */

:root[data-theme="contrast-light"] { color-scheme: light;
  --bg:#ffffff; --surface:#ffffff; --surface-2:#f0f0f0; --surface-3:#e2e2e2; --overlay:rgba(0,0,0,.6);
  --border:#000000; --border-strong:#000000;
  --text:#000000; --text-muted:#1a1a1a; --text-faint:#333333; --text-on-primary:#ffffff; --text-on-accent:#ffffff;
  --primary:#0033cc; --primary-hover:#0029a3; --primary-soft:#dde6ff; --accent:#0033cc; --accent-soft:#dde6ff;
  --success:#006b2d; --success-soft:#d6f0df; --warning:#8a5200; --warning-soft:#f7e8cf;
  --danger:#b80014; --danger-soft:#fbdadd; --info:#004c99; --info-soft:#d9e9fb;
  --ring:0 0 0 3px #0033cc;
}

:root[data-theme="contrast-dark"] { color-scheme: dark;
  --bg:#000000; --surface:#0a0a0a; --surface-2:#141414; --surface-3:#1f1f1f; --overlay:rgba(0,0,0,.75);
  --border:#ffffff; --border-strong:#ffffff;
  --text:#ffffff; --text-muted:#e0e0e0; --text-faint:#bdbdbd; --text-on-primary:#000000; --text-on-accent:#000000;
  --primary:#ffd400; --primary-hover:#ffe04d; --primary-soft:#2e2700; --accent:#ffd400; --accent-soft:#2e2700;
  --success:#3ee07a; --success-soft:#0c2e18; --warning:#ffd400; --warning-soft:#2e2700;
  --danger:#ff5a64; --danger-soft:#350f12; --info:#5cc8ff; --info-soft:#04293a;
  --ring:0 0 0 3px #ffd400;
}

/* ============================= BRAND THEMES ============================= */
/* Neutral light shell + one saturated brand primary.                        */

:root[data-theme="crimson"] { color-scheme: light;
  --bg:#f7f3f3; --surface:#ffffff; --surface-2:#f1e7e8; --surface-3:#e8d6d8; --overlay:rgba(30,10,12,.45);
  --border:#e2cdcf; --border-strong:#caa3a6;
  --text:#241416; --text-muted:#6b4f52; --text-faint:#9a7c7f; --text-on-primary:#fff; --text-on-accent:#fff;
  --primary:#c1121f; --primary-hover:#a50f1a; --primary-soft:#fadcde; --accent:#c1121f; --accent-soft:#fadcde;
  --success:#1f8a55; --success-soft:#e2f3ea; --warning:#b9770a; --warning-soft:#f9edd6;
  --danger:#cc2f3b; --danger-soft:#fbe0e2; --info:#2f72c4; --info-soft:#e3edf8;
}

:root[data-theme="emerald"] { color-scheme: light;
  --bg:#eef6f1; --surface:#ffffff; --surface-2:#dfeee6; --surface-3:#cce4d6; --overlay:rgba(6,30,20,.45);
  --border:#c8e1d3; --border-strong:#9ecbb2;
  --text:#11271c; --text-muted:#3f6553; --text-faint:#6c9281; --text-on-primary:#fff; --text-on-accent:#fff;
  --primary:#0b7a4b; --primary-hover:#096640; --primary-soft:#d4eee0; --accent:#0b7a4b; --accent-soft:#d4eee0;
  --success:#0b7a4b; --success-soft:#d4eee0; --warning:#b07a08; --warning-soft:#f6ebd2;
  --danger:#cc3a44; --danger-soft:#fadfe1; --info:#1d7fb8; --info-soft:#dceef7;
}

:root[data-theme="royal"] { color-scheme: light;
  --bg:#f2f3fa; --surface:#ffffff; --surface-2:#e6e8f5; --surface-3:#d6daee; --overlay:rgba(12,16,48,.45);
  --border:#d2d6ee; --border-strong:#a8aede;
  --text:#161a33; --text-muted:#525980; --text-faint:#8187ab; --text-on-primary:#fff; --text-on-accent:#fff;
  --primary:#2b3a8c; --primary-hover:#243178; --primary-soft:#dde1f6; --accent:#2b3a8c; --accent-soft:#dde1f6;
  --success:#1f8a55; --success-soft:#e2f3ea; --warning:#b9770a; --warning-soft:#f9edd6;
  --danger:#cc2f3b; --danger-soft:#fbe0e2; --info:#2f5fc4; --info-soft:#e1e7f8;
}

:root[data-theme="amber"] { color-scheme: light;
  --bg:#fbf6ee; --surface:#fffdf9; --surface-2:#f5ebd9; --surface-3:#eedcc0; --overlay:rgba(40,28,8,.42);
  --border:#ecddc2; --border-strong:#d4bd91;
  --text:#2c2210; --text-muted:#6d5c3c; --text-faint:#9a8762; --text-on-primary:#241800; --text-on-accent:#241800;
  --primary:#d98c0a; --primary-hover:#bd7908; --primary-soft:#f8e7c6; --accent:#d98c0a; --accent-soft:#f8e7c6;
  --success:#2c7d4f; --success-soft:#e0f0e7; --warning:#b07407; --warning-soft:#f7ebd4;
  --danger:#c33b32; --danger-soft:#f8e0dd; --info:#3a6ea8; --info-soft:#e2ecf6;
}

/* Auto dark via OS preference when no explicit theme is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { color-scheme: dark;
    --bg:#0c1322; --surface:#141d30; --surface-2:#1c2740; --surface-3:#26334f; --overlay:rgba(0,0,0,.6);
    --border:#28344c; --border-strong:#3a4a68;
    --text:#e8eefb; --text-muted:#9fb0c9; --text-faint:#6c7d97; --text-on-primary:#06101f; --text-on-accent:#06101f;
    --primary:#4dabf7; --primary-hover:#6cbbf9; --primary-soft:#16273e; --accent:#4dabf7; --accent-soft:#16273e;
    --success:#36b37e; --warning:#e0a020; --danger:#f06a73; --info:#4dabf7;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 6px 18px rgba(0,0,0,.5); --shadow-lg:0 16px 40px rgba(0,0,0,.6);
  }
}