/* Look switcher (owner, 01/11/2026). Palettes and font pairings as token overrides, picked per device by
   data-palette / data-font on <html> (look.js, base.html). "current" is tokens/colors.css + typography.css untouched.
   Selectors are unscoped on purpose: a Settings card carrying data-palette / data-font previews its own tokens.
   Status fills keep white text (admin.css), so every --st-* except yellow stays at 4.5:1 or more against #fff;
   dark mode lifts each fill to the lightest tone that still holds 4.5:1 with white (scripts/look_contrast.py). */

/* ---------- גיליון: newsprint and graphite ink; color is left to the status cells ---------- */
[data-palette="paper"]{
  --bg:#ebeae5; --surface:#fbfbf8; --surface-2:#f3f2ee; --surface-sunk:#e2e1db;
  --line:#dbdad3; --line-strong:#c4c3bb;
  --ink:#16171a; --ink-2:#43454a; --ink-3:#5e6066; --ink-inverse:#fbfbf8;
  --primary:#2a2d33; --primary-hover:#111316; --primary-soft:#e2e3e6; --primary-ink:#ffffff;
  --st-green:#2e6b48; --st-green-soft:#e1ece4;
  --st-blue:#2b5888; --st-blue-soft:#e0e8f1;
  --st-purple:#5d4987; --st-purple-soft:#e8e4f0;
  --st-pink:#a03860; --st-pink-soft:#f3e3e9;
  --st-red:#b0302a; --st-red-soft:#f5e1df;
  --st-yellow:#e2b23a; --st-yellow-ink:#2a2000; --st-yellow-soft:#f6ecd0;
  --st-gray:#63666c; --st-gray-soft:#e8e8e5;
  --st-black:#1b1d21;
  --ch-iran:#2c6a70; --ch-iran-soft:#dfeaeb;
  --ch-turkey:#a74924; --ch-turkey-soft:#f3e4dc;
  --ch-haredi:#46457c; --ch-haredi-soft:#e3e3ee;
}
[data-theme="dark"][data-palette="paper"],[data-theme="dark"] [data-palette="paper"]{
  --bg:#121211; --surface:#1b1b19; --surface-2:#232320; --surface-sunk:#0c0c0b;
  --line:#2e2e2a; --line-strong:#3f3f3a;
  --ink:#ecebe6; --ink-2:#bdbcb5; --ink-3:#97968f; --ink-inverse:#121211;
  --primary:#6e7581; --primary-hover:#7b828e; --primary-soft:#212327;
  --st-green:#45815d; --st-green-soft:#17271d; --st-blue:#4a78aa; --st-blue-soft:#172432;
  --st-purple:#7e6aab; --st-purple-soft:#251f32; --st-pink:#bb5177; --st-pink-soft:#331b22;
  --st-red:#ca4940; --st-red-soft:#341b18; --st-gray:#72757b; --st-gray-soft:#222325; --st-yellow-soft:#2f2a1b;
  --ch-iran:#417e84; --ch-iran-soft:#162628; --ch-turkey:#b95935; --ch-turkey-soft:#341c14; --ch-haredi:#6f6faa; --ch-haredi-soft:#212132;
}

/* ---------- משמרת לילה: the deep blue of a night news desk, Telegram sky for actions ---------- */
[data-palette="night"]{
  --bg:#e5eaf1; --surface:#f8fafd; --surface-2:#eef2f7; --surface-sunk:#dbe2eb;
  --line:#d2d9e3; --line-strong:#b6c0ce;
  --ink:#0d1829; --ink-2:#33435a; --ink-3:#526178; --ink-inverse:#f8fafd;
  --primary:#1565a6; --primary-hover:#0f548b; --primary-soft:#dae8f5; --primary-ink:#ffffff;
  --st-green:#1d7556; --st-green-soft:#dcefe7;
  --st-blue:#3a52b0; --st-blue-soft:#e1e5f6;
  --st-purple:#6a48ad; --st-purple-soft:#e9e2f5;
  --st-pink:#ad3774; --st-pink-soft:#f5e0eb;
  --st-red:#bb3329; --st-red-soft:#f7e0dd;
  --st-yellow:#f0b83a; --st-yellow-ink:#2b1d00; --st-yellow-soft:#fbefd2;
  --st-gray:#5c6679; --st-gray-soft:#e3e7ed;
  --st-black:#14202f;
  --ch-iran:#18727a; --ch-iran-soft:#d9eced;
  --ch-turkey:#ac4712; --ch-turkey-soft:#f6e4d9;
  --ch-haredi:#4d4596; --ch-haredi-soft:#e4e2f2;
}
[data-theme="dark"][data-palette="night"],[data-theme="dark"] [data-palette="night"]{
  --bg:#0a1120; --surface:#101a2c; --surface-2:#16223a; --surface-sunk:#070d19;
  --line:#1e2b43; --line-strong:#2c3c58;
  --ink:#e4ecf7; --ink-2:#adbcd2; --ink-3:#8394ae; --ink-inverse:#0a1120;
  --primary:#2b78bd; --primary-hover:#3586cc; --primary-soft:#122435;
  --st-green:#2f8363; --st-green-soft:#12281e; --st-blue:#536fd0; --st-blue-soft:#1a2136;
  --st-purple:#8362ca; --st-purple-soft:#241e34; --st-pink:#c14985; --st-pink-soft:#311a24;
  --st-red:#ce463a; --st-red-soft:#331b17; --st-gray:#6a7588; --st-gray-soft:#1f2328; --st-yellow-soft:#33290f;
  --ch-iran:#2c8089; --ch-iran-soft:#112629; --ch-turkey:#bd5727; --ch-turkey-soft:#321c12; --ch-haredi:#706bc0; --ch-haredi-soft:#202035;
}

/* ---------- חרס: cream paper and terracotta, a weekend magazine ---------- */
[data-palette="clay"]{
  --bg:#efe8dc; --surface:#fffcf6; --surface-2:#f7f1e7; --surface-sunk:#e7dfd1;
  --line:#e2d8c8; --line-strong:#cbbda8;
  --ink:#2a2018; --ink-2:#584a3c; --ink-3:#6f5f51; --ink-inverse:#fffcf6;
  --primary:#ab4128; --primary-hover:#923520; --primary-soft:#f5e2d8; --primary-ink:#ffffff;
  --st-green:#4b6f2d; --st-green-soft:#e7eedb;
  --st-blue:#2e5b7d; --st-blue-soft:#e0e9f0;
  --st-purple:#6b4a7c; --st-purple-soft:#ece3ef;
  --st-pink:#9b4880; --st-pink-soft:#f3e2ec;
  --st-red:#981c38; --st-red-soft:#f4dde1;
  --st-yellow:#e0a93a; --st-yellow-ink:#2c1c00; --st-yellow-soft:#f8ebcf;
  --st-gray:#6f6459; --st-gray-soft:#ebe5dc;
  --st-black:#2a2018;
  --ch-iran:#2c6a64; --ch-iran-soft:#dde9e5;
  --ch-turkey:#9e4e13; --ch-turkey-soft:#f4e3d4;
  --ch-haredi:#4e4877; --ch-haredi-soft:#e5e2ee;
}
[data-theme="dark"][data-palette="clay"],[data-theme="dark"] [data-palette="clay"]{
  --bg:#16110d; --surface:#1f1813; --surface-2:#281f18; --surface-sunk:#100c09;
  --line:#352a20; --line-strong:#47392c;
  --ink:#f2e9dd; --ink-2:#cdbba6; --ink-3:#a38f7b; --ink-inverse:#16110d;
  --primary:#c15338; --primary-hover:#cc6248; --primary-soft:#321a14;
  --st-green:#5a7f3d; --st-green-soft:#1b2613; --st-blue:#4c799d; --st-blue-soft:#17232e;
  --st-purple:#8a689c; --st-purple-soft:#271d2c; --st-pink:#ac5890; --st-pink-soft:#2f1a27;
  --st-red:#c64a5d; --st-red-soft:#32191c; --st-gray:#7f7368; --st-gray-soft:#25211e; --st-yellow-soft:#33280f;
  --ch-iran:#427f79; --ch-iran-soft:#152524; --ch-turkey:#b15f29; --ch-turkey-soft:#311c0f; --ch-haredi:#756fa2; --ch-haredi-soft:#21202e;
}

/* every non-current palette: the focus ring follows its primary */
[data-palette="paper"],[data-palette="night"],[data-palette="clay"]{
  --focus-ring:0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent);
}

/* ---------- font pairings; numbers keep tabular figures where the CSS asks for them ---------- */
[data-font="heebo"]{--font-ui:"Heebo", system-ui, sans-serif; --font-title:"Secular One", "Heebo", sans-serif}
/* Secular One has one weight: never fake a bold on it */
[data-font="heebo"]{font-synthesis-weight:none}
[data-font="plex"]{--font-ui:"IBM Plex Sans Hebrew", system-ui, sans-serif; --font-title:"IBM Plex Sans Hebrew", sans-serif}
[data-font="rubik"]{--font-ui:"Rubik", system-ui, sans-serif; --font-title:"Rubik", sans-serif}

/* ---------- Settings: מראה ---------- */
.look-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:700px){.look-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.look-c{display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:10px;text-align:right;border-radius:var(--r-lg);
  background:var(--surface);color:var(--ink);box-shadow:var(--sh-1);cursor:pointer;
  transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.look-c:hover{transform:translateY(-1px)}
.look-c:active{transform:translateY(1px)}
.look-c[aria-pressed="true"]{box-shadow:0 0 0 2px var(--primary),var(--sh-1)}
.look-c:focus-visible{outline:none;box-shadow:var(--focus-ring),0 0 0 2px var(--primary)}
.look-c b{font:600 14px var(--font-ui)}
.look-c small{font:400 12px/1.4 var(--font-ui);color:var(--ink-3)}
.look-strip{display:flex;height:30px;border-radius:var(--r-sm);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);margin-bottom:4px}
.look-strip i{flex:1}
.look-strip i:first-child{flex:2.4}
.look-sample{font:500 16px/1.35 var(--font-ui);font-variant-numeric:tabular-nums;min-height:44px;margin-bottom:2px}
.look-c[data-font] b{font-family:var(--font-title)}
@media (prefers-reduced-motion:reduce){.look-c{transition:none}.look-c:hover,.look-c:active{transform:none}}