/* TwentyDZ look tokens (2026-10-03, Claude): the three looks, the look switcher and the board button.
   Loaded by every page; the new pages add ui/tdz.css for components, the older worlds add ui/skin.css. */
/* ---------- clean (default) ---------- */
:root,html[data-look="clean"]{
  --font:'Tajawal',system-ui,sans-serif; --head:'Alexandria','Tajawal',sans-serif; --head-w:800;
  --bg:#F5F6FA; --bg-img:none;
  --surface:#FFFFFF; --surface-2:#F0F1F6; --bw:0px; --border:transparent; --border-2:#E3E5EE;
  --shadow:0 1px 2px rgba(20,22,31,.06),0 14px 32px -20px rgba(20,22,31,.22); --shadow-hi:0 2px 4px rgba(20,22,31,.06),0 22px 40px -22px rgba(20,22,31,.3);
  --blur:none; --r:24px; --r-sm:16px;
  --text:#14161F; --muted:#6B7083; --soft:#3A3F52;
  --accent:#FF7A3D; --accent-2:#FFE9DE; --accent-ink:#FFFFFF; --accent-fill:#FF7A3D; --accent-text:#C2501C;
  --btn:#14161F; --btn-ink:#FFFFFF; --btn-bw:0px; --btn-shadow:0 8px 20px -10px rgba(20,22,31,.5); --press:translateY(1px);
  --hero:#FF7A3D; --hero-ink:#FFFFFF;
  --ok:#1DB37A; --ok-bg:#E6F8F0; --ok-ink:#0B6B47; --bad:#E5484D; --bad-bg:#FDECEC;
  --track:#E3E5EE; --focus:#FF7A3D;
  /* subject colours */
  --s-ar:#7C5CFF; --s-ma:#FF7A3D; --s-fr:#E5487F; --s-en:#3D7BFF; --s-ph:#10B5A5; --s-sv:#22A06B; --s-hg:#C97A3F; --s-is:#0E9384; --s-ci:#D9A21B; --s-fi:#8E6CEF;
  --tile-ink:#14161F; color-scheme:light;
}
/* ---------- night ---------- */
html[data-look="night"]{
  --head:'Baloo Bhaijaan 2','Tajawal',sans-serif; --head-w:800;
  --bg:#0B0D1F; --bg-img:radial-gradient(110% 60% at 85% -10%,rgba(91,61,214,.55) 0%,transparent 60%),radial-gradient(80% 50% at -10% 105%,rgba(15,120,150,.45) 0%,transparent 60%);
  --surface:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.035)); --surface-2:rgba(255,255,255,.06); --bw:1px; --border:rgba(255,255,255,.14); --border-2:rgba(255,255,255,.18);
  --shadow:0 20px 40px -26px rgba(0,0,0,.8); --shadow-hi:0 26px 50px -24px rgba(0,0,0,.9),0 0 0 1px rgba(255,179,107,.25);
  --blur:blur(12px); --r:22px; --r-sm:16px;
  --text:#F2F3FF; --muted:#9BA0C8; --soft:#CDD0EE;
  --accent:#FF8A4C; --accent-2:rgba(255,138,76,.16); --accent-ink:#1B0E05; --accent-fill:linear-gradient(90deg,#FFB36B,#FF6A3D); --accent-text:#FFB36B;
  --btn:linear-gradient(90deg,#FFB36B,#FF6A3D); --btn-ink:#1B0E05; --btn-bw:0px; --btn-shadow:0 10px 30px -8px rgba(255,106,61,.7); --press:translateY(1px);
  --hero:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04)); --hero-ink:#F2F3FF;
  --ok:#2EE6A6; --ok-bg:rgba(46,230,166,.14); --ok-ink:#7FF5CB; --bad:#FF6B7A; --bad-bg:rgba(255,107,122,.14);
  --track:rgba(255,255,255,.14); --focus:#FFB36B;
  --s-ar:#8B5CF6; --s-ma:#FF6A3D; --s-fr:#E0459B; --s-en:#3B82F6; --s-ph:#0FB5D4; --s-sv:#10B981; --s-hg:#D97706; --s-is:#14B8A6; --s-ci:#EAB308; --s-fi:#A855F7;
  --tile-ink:#FFFFFF; color-scheme:dark;
}
/* ---------- bold ---------- */
html[data-look="bold"]{
  --head:'Lalezar','Tajawal',sans-serif; --head-w:400;
  --bg:#FFF8E7; --bg-img:none;
  --surface:#FFFFFF; --surface-2:#FFF1C9; --bw:3px; --border:#111111; --border-2:#111111;
  --shadow:5px 5px 0 #111111; --shadow-hi:7px 7px 0 #111111;
  --blur:none; --r:20px; --r-sm:14px;
  --text:#111111; --muted:#4A4A4A; --soft:#222222;
  --accent:#FF4F9A; --accent-2:#FFD93D; --accent-ink:#111111; --accent-fill:#FF4F9A; --accent-text:#111111;
  --btn:#FF4F9A; --btn-ink:#111111; --btn-bw:3px; --btn-shadow:4px 4px 0 #111111; --press:translate(4px,4px);
  --hero:#7B5CFF; --hero-ink:#FFFFFF;
  --ok:#111111; --ok-bg:#B8F15A; --ok-ink:#111111; --bad:#111111; --bad-bg:#FF8A8A;
  --track:#FFFFFF; --focus:#2EC5FF;
  --s-ar:#2EC5FF; --s-ma:#FF4F9A; --s-fr:#FF8A3D; --s-en:#FFD93D; --s-ph:#B8F15A; --s-sv:#3EDBA6; --s-hg:#FFB4A2; --s-is:#A78BFA; --s-ci:#FFD93D; --s-fi:#C4B5FD;
  --tile-ink:#111111; color-scheme:light;
}

/* ---------- the look switcher (ui/look.js) ---------- */
.looks{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--surface-2);border:var(--bw) solid var(--border)}
.looks button{width:34px;height:34px;border-radius:50%;border:2px solid transparent;padding:0;display:grid;place-items:center;background:none}
.looks button i{width:22px;height:22px;border-radius:50%;display:block}
.looks button[data-l="clean"] i{background:linear-gradient(135deg,#FFFFFF 50%,#FF7A3D 50%);box-shadow:inset 0 0 0 1.5px #D0D3DE}
.looks button[data-l="night"] i{background:radial-gradient(circle at 30% 30%,#7C5CFF,#0B0D1F 70%);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.looks button[data-l="bold"] i{background:conic-gradient(#FF4F9A 0 25%,#2EC5FF 0 50%,#B8F15A 0 75%,#FFD93D 0);box-shadow:inset 0 0 0 2px #111}
.looks button[aria-pressed="true"]{border-color:var(--accent)}
html[data-look="bold"] .looks button[aria-pressed="true"]{border-color:#111}

/* the split-screen board button (split-board.js) */
.tdzb-fab{background:var(--surface)!important;color:var(--text)!important;font-family:var(--font)!important;font-weight:800!important;border:var(--bw) solid var(--border)!important;box-shadow:var(--shadow)!important;border-radius:var(--r-sm)!important;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
html[data-look="clean"] .tdzb-fab{border:2px solid var(--border-2)!important}