/* LexiGlobal UI prototype — semantic theme tokens. Every colour in the UI comes from these. */

:root, [data-theme="silver-platinum"] {
  color-scheme: light;
  --page-bg: #EEF0F3; --ambient-1: rgba(205, 196, 235, .38); --ambient-2: rgba(233, 214, 176, .30);
  --surface: #FCFCFD; --surface-warm: #FFF9EE; --structure-bg: #FFFBF3;
  --learner-bg: #E7F0FC; --learner-label: #2B5FA6;
  --everyday-bg: #E3F4EC; --everyday-label: #1D6A4A;
  --formal-bg: #EFE8FB; --formal-label: #6539B0;
  --text: #202936; --text-2: #526075; --head: #263B58; --icon: #263B58;
  --metal: #B28A45; --metal-text: #866529; --metal-line: rgba(178, 138, 69, .55);
  --border: #B9C2CE; --btn-a: #FFFFFF; --btn-b: #D7DCE3; --btn-ink: #1E2C4A;
  --nav-a: #405775; --nav-b: #172B46; --nav-ink: #FFFFFF;
  --focus: #3D6CA8; --footer-bg: #FBFBFD; --error: #8A2C2C; --track: #7A8597; --thumb: #526075;
  --hi: #F3DDA6; --metal-deep: #9C7631;
}
[data-theme="pearl-gold"] {
  color-scheme: light;
  --page-bg: #F5EFE3; --ambient-1: rgba(233, 205, 150, .35); --ambient-2: rgba(255, 246, 225, .55);
  --surface: #FFFDF8; --surface-warm: #FFF6E4; --structure-bg: #FFF9EE;
  --learner-bg: #EAF0F6; --learner-label: #2E5A84;
  --everyday-bg: #E8F2E2; --everyday-label: #3B6A2A;
  --formal-bg: #F4E8EF; --formal-label: #86385F;
  --text: #2B2416; --text-2: #665A44; --head: #4A3714; --icon: #5A4319;
  --metal: #B0832F; --metal-text: #7E5D1C; --metal-line: rgba(176, 131, 47, .6);
  --border: #D9C7A1; --btn-a: #FFFFFF; --btn-b: #EADBBB; --btn-ink: #4A3714;
  --nav-a: #8F6626; --nav-b: #5E4113; --nav-ink: #FFFFFF;
  --focus: #7E5D1C; --footer-bg: #FFFDF8; --error: #8A2C2C; --track: #8F7F5E; --thumb: #665A44;
  --hi: #F6E2B0; --metal-deep: #8E6824;
}
[data-theme="royal-navy"] {
  color-scheme: dark;
  --page-bg: #0C1C38; --ambient-1: rgba(226, 190, 114, .12); --ambient-2: rgba(80, 120, 190, .18);
  --surface: #13284C; --surface-warm: #172E57; --structure-bg: #152B52;
  --learner-bg: #1D3B68; --learner-label: #A9CBFF;
  --everyday-bg: #173F45; --everyday-label: #93E2C6;
  --formal-bg: #2E2C60; --formal-label: #D2BFFF;
  --text: #F1ECE1; --text-2: #B7C2D6; --head: #F4E6C4; --icon: #E2BE72;
  --metal: #E2BE72; --metal-text: #E2BE72; --metal-line: rgba(226, 190, 114, .55);
  --border: #2D4A7A; --btn-a: #22426F; --btn-b: #11284C; --btn-ink: #F1ECE1;
  --nav-a: #E3C37B; --nav-b: #B08A3A; --nav-ink: #1A1404;
  --focus: #8FB7EE; --footer-bg: #11254A; --error: #FFB4B4; --track: #7189B3; --thumb: #B7C2D6;
  --hi: #F6E5B3; --metal-deep: #A8823A;
}
[data-theme="lavender-platinum"] {
  color-scheme: light;
  --page-bg: #EFEDF6; --ambient-1: rgba(190, 176, 236, .42); --ambient-2: rgba(240, 225, 200, .30);
  --surface: #FDFCFF; --surface-warm: #FFF9F1; --structure-bg: #FBF8FF;
  --learner-bg: #E8EEFB; --learner-label: #3655A0;
  --everyday-bg: #E4F3EE; --everyday-label: #20684F;
  --formal-bg: #EDE4FA; --formal-label: #5F33A6;
  --text: #26213A; --text-2: #5A5373; --head: #2E2758; --icon: #3A3270;
  --metal: #A88A4E; --metal-text: #7A602A; --metal-line: rgba(168, 138, 78, .55);
  --border: #C9C3DE; --btn-a: #FFFFFF; --btn-b: #DCD7EC; --btn-ink: #2E2758;
  --nav-a: #5A4E92; --nav-b: #2E2558; --nav-ink: #FFFFFF;
  --focus: #5A4E92; --footer-bg: #FDFCFF; --error: #8A2C2C; --track: #827CA0; --thumb: #5A5373;
  --hi: #EEDDB8; --metal-deep: #826632;
}
[data-theme="emerald-gold"] {
  color-scheme: dark;
  --page-bg: #0B231C; --ambient-1: rgba(217, 181, 94, .12); --ambient-2: rgba(80, 170, 130, .14);
  --surface: #123128; --surface-warm: #163A2F; --structure-bg: #143529;
  --learner-bg: #173C4A; --learner-label: #A3D6F2;
  --everyday-bg: #1B4A38; --everyday-label: #A8EBC5;
  --formal-bg: #2E3350; --formal-label: #D4C4FF;
  --text: #EEF3EE; --text-2: #A9C4B8; --head: #F3E3B8; --icon: #D9B55E;
  --metal: #D9B55E; --metal-text: #D9B55E; --metal-line: rgba(217, 181, 94, .55);
  --border: #2B5747; --btn-a: #1E4B3D; --btn-b: #0F2D23; --btn-ink: #EEF3EE;
  --nav-a: #DDBB66; --nav-b: #A8812E; --nav-ink: #1A1404;
  --focus: #9FE0C2; --footer-bg: #102D24; --error: #FFB4B4; --track: #6FA08C; --thumb: #A9C4B8;
  --hi: #F4E2AE; --metal-deep: #A4822F;
}
[data-theme="champagne-ivory"] {
  color-scheme: light;
  --page-bg: #F7F1E6; --ambient-1: rgba(236, 214, 170, .40); --ambient-2: rgba(255, 250, 240, .60);
  --surface: #FFFCF6; --surface-warm: #FFF6E6; --structure-bg: #FFF9EF;
  --learner-bg: #EBF1F7; --learner-label: #2F5C86;
  --everyday-bg: #E8F2E3; --everyday-label: #386A2C;
  --formal-bg: #F3E8F0; --formal-label: #864066;
  --text: #2F281C; --text-2: #675C48; --head: #26324A; --icon: #263B58;
  --metal: #B28A45; --metal-text: #84632A; --metal-line: rgba(178, 138, 69, .55);
  --border: #DDCDB0; --btn-a: #FFFFFF; --btn-b: #EEE3CF; --btn-ink: #2B3650;
  --nav-a: #405775; --nav-b: #172B46; --nav-ink: #FFFFFF;
  --focus: #3D6CA8; --footer-bg: #FFFCF6; --error: #8A2C2C; --track: #8F8063; --thumb: #675C48;
  --hi: #F3DDA6; --metal-deep: #9C7631;
}
[data-theme="burgundy-rose"] {
  color-scheme: dark;
  --page-bg: #2A0D18; --ambient-1: rgba(232, 188, 134, .12); --ambient-2: rgba(200, 90, 130, .16);
  --surface: #3A1424; --surface-warm: #43182A; --structure-bg: #3F1628;
  --learner-bg: #2F2A48; --learner-label: #C9C8FF;
  --everyday-bg: #2F3A2C; --everyday-label: #CFE7B4;
  --formal-bg: #4A1F3F; --formal-label: #F6C2E6;
  --text: #F8ECEF; --text-2: #DDB8C4; --head: #F6D9C9; --icon: #E8BC86;
  --metal: #E8BC86; --metal-text: #E8BC86; --metal-line: rgba(232, 188, 134, .55);
  --border: #6B2C42; --btn-a: #58223C; --btn-b: #331020; --btn-ink: #F8ECEF;
  --nav-a: #EBC195; --nav-b: #BE8D5E; --nav-ink: #2A0D18;
  --focus: #F5C6D4; --footer-bg: #36121F; --error: #FFC2C2; --track: #B07489; --thumb: #DDB8C4;
  --hi: #F8E0C2; --metal-deep: #B5875A;
}
[data-theme="sapphire-silver"] {
  color-scheme: light;
  --page-bg: #E9EEF6; --ambient-1: rgba(150, 180, 230, .35); --ambient-2: rgba(220, 228, 240, .55);
  --surface: #FBFCFE; --surface-warm: #FFF9F0; --structure-bg: #F7FAFE;
  --learner-bg: #E2EDFB; --learner-label: #1F5BA8;
  --everyday-bg: #E0F2EE; --everyday-label: #1C6A5B;
  --formal-bg: #ECE8FA; --formal-label: #4E3EAF;
  --text: #1C2A40; --text-2: #4E5E78; --head: #173D73; --icon: #1E4A86;
  --metal: #8E9BB0; --metal-text: #2C5598; --metal-line: rgba(120, 140, 175, .6);
  --border: #B3C2D9; --btn-a: #FFFFFF; --btn-b: #D3DDEA; --btn-ink: #173D73;
  --nav-a: #3D6CB3; --nav-b: #173D73; --nav-ink: #FFFFFF;
  --focus: #1E4A86; --footer-bg: #FBFCFE; --error: #8A2C2C; --track: #6F82A0; --thumb: #4E5E78;
  --hi: #EEF2F8; --metal-deep: #66748C;
}
[data-theme="graphite-copper"] {
  color-scheme: dark;
  --page-bg: #18191C; --ambient-1: rgba(215, 154, 106, .12); --ambient-2: rgba(120, 120, 130, .14);
  --surface: #232529; --surface-warm: #2A2C30; --structure-bg: #26282C;
  --learner-bg: #22303C; --learner-label: #A9CDEB;
  --everyday-bg: #23332C; --everyday-label: #A8DDBF;
  --formal-bg: #2F2A3B; --formal-label: #CDBDF2;
  --text: #EFEAE4; --text-2: #B4AEA7; --head: #F1D7C2; --icon: #D79A6A;
  --metal: #D79A6A; --metal-text: #D79A6A; --metal-line: rgba(215, 154, 106, .55);
  --border: #3F4248; --btn-a: #393C42; --btn-b: #1F2125; --btn-ink: #EFEAE4;
  --nav-a: #DD9C66; --nav-b: #B47544; --nav-ink: #1A0F07;
  --focus: #F2C29A; --footer-bg: #202226; --error: #FFB4B4; --track: #83878E; --thumb: #B4AEA7;
  --hi: #F3CDAE; --metal-deep: #A06B42;
}

/* derived tokens: computed from each theme's own colours, so they follow the theme too */
:root {
  --chip-bg: color-mix(in srgb, var(--btn-b) 45%, var(--surface));
  --progress-track: color-mix(in srgb, var(--track) 35%, var(--surface));
  --progress-fill: var(--learner-label);
  --switch-on: var(--nav-b);
  --switch-ink: var(--nav-ink);
  --avatar-a: var(--hi); --avatar-b: var(--metal);
  --hairline: var(--metal-line);
  --shadow-card: 0 5px 16px rgba(32, 41, 54, .08);
  --shadow-btn: 0 3px 7px rgba(32, 41, 54, .16), inset 0 1px 0 rgba(255, 255, 255, .85);
  --shadow-btn-pressed: 0 1px 3px rgba(32, 41, 54, .18), inset 0 1px 0 rgba(255, 255, 255, .6);
  --knob-edge: var(--metal-deep);
}
[data-theme="royal-navy"], [data-theme="emerald-gold"], [data-theme="burgundy-rose"], [data-theme="graphite-copper"] {
  --knob-edge: var(--hi);
  --shadow-card: 0 5px 16px rgba(0, 0, 0, .28);
  --shadow-btn: 0 3px 7px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .12);
  --shadow-btn-pressed: 0 1px 3px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* density: spacing only — the font size never changes with density */
:root, [data-density="compact"] { --lh: 1.35; --para: 4px; --pad: 12px; --gap: 8px; --section: 10px; }
[data-density="comfortable"] { --lh: 1.6; --para: 10px; --pad: 16px; --gap: 12px; --section: 14px; }

/* type */
:root {
  --serif: "Cormorant Garamond", "Kantumruy Pro", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Manrope", "Kantumruy Pro", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --khmer: "Kantumruy Pro", "Noto Sans Khmer", "Khmer UI", sans-serif;
  /* IPA: platform UI fonts with full IPA coverage first (an installed italic-only "Noto Sans" must not win) */
  --ipa: "Segoe UI", -apple-system, "SF Pro Text", Roboto, "Noto Sans", "Lucida Sans Unicode", "Arial Unicode MS", sans-serif;
  --ipa-style: normal;
  --radius-card: 14px; --radius-sm: 11px;
  /* 2026-10-26 (owner: "fix full screen view for phone and tablet"): phones keep the 440px column; tablets use the screen */
  --app-max: 440px;
  --page-x: 14px; --nav-h: 60px; --safe-b: env(safe-area-inset-bottom, 0px);
  --dur: 150ms;
}

/* owner 2026-10-16 (“for navy background I like this colour”): Royal Navy takes the brighter royal-blue navy of the owner's reference —
   page #142848, card surfaces #1A3058 / #1D3560 — and the reference's gold C2 accent (C2 label gold on a deeper navy). */
[data-theme="royal-navy"] {
  --page-bg: #142848; --ambient-1: rgba(226, 190, 114, .10); --ambient-2: rgba(90, 140, 220, .20);
  --surface: #1A3058; --surface-warm: #1D3560; --structure-bg: #1B325A;
  --learner-bg: #22416F; --formal-bg: #1C2747; --formal-label: #F2C14E;
  --border: #33548A; --btn-a: #26487C; --btn-b: #172F57; --footer-bg: #172C52;
}

@media (min-width: 600px) { :root { --app-max: min(100vw, 920px); } }