/* «کویر»: desert dusk.  A purple evening sky, a low orange sun, peach and amber light,
   soft round buttons and Lalezar for titles.  Every colour token of the app is mapped
   in skin-kavir.gen.css (generated); this file sets the palette and the hand-tuned parts.
   Active when <html data-skin="kavir">; without it the classic look is untouched. */

@font-face {
  font-family: "Lalezar";
  src: url("../fonts/lalezar-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
  font-display: swap;
}
@font-face {
  font-family: "Lalezar";
  src: url("../fonts/lalezar-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
  font-display: swap;
}

:root[data-skin="kavir"] {
  --bg0: #1b1030; --bg1: #241640; --bg2: #2f1d4c;
  --panel1: #3a2152; --panel2: #24163a;
  --glass1: rgba(70, 38, 86, .72); --glass2: rgba(36, 20, 54, .7);
  --gold: #ffc98a; --gold-hi: #ffe4bd; --gold-lo: #b8662f;
  --text: #fbeede; --text-2: #e6cdca; --text-3: #b99aac;
  --edge: rgba(255, 196, 150, .24); --edge-2: rgba(255, 222, 196, .1);
  --green: #9fe39a; --red: #ff8a78; --blue: #c4aaff; --purple: #e4a6ff; --cyan: #ffb38a;
  --glass-face: linear-gradient(150deg, rgba(122, 58, 108, .34), rgba(38, 18, 54, .76));
  --screen-face: rgba(31, 17, 47, .88);
  --sheet-face: linear-gradient(165deg, rgba(78, 38, 94, .96), rgba(33, 17, 50, .97));
  --glass-shadow: inset 0 1px rgba(255, 228, 200, .12), 0 10px 28px rgba(12, 2, 22, .38);
  --radius: 20px;
  --kv-sun: #ffb066;
  --kv-dune: #3a1f44;
  --kv-display: "Lalezar", "Vazirmatn", Tahoma, sans-serif;
  color-scheme: dark;
}

/* ------------------------------------------------------------------ sky */
:root[data-skin="kavir"] body {
  background:
    radial-gradient(circle at 82% 9%, rgba(255, 176, 102, .55) 0 46px, rgba(255, 176, 102, .16) 47px 120px, transparent 121px),
    linear-gradient(180deg, #5a2a58 0%, #3a1d4a 34%, #23143a 62%, #1b1030 100%);
}
:root[data-skin="kavir"] .map-shade {
  background: linear-gradient(rgba(74, 30, 72, .42), transparent 22%, transparent 68%, rgba(40, 16, 52, .55));
}
:root[data-skin="kavir"] .map-dim { background: rgba(46, 18, 54, .22); }
:root[data-skin="kavir"] #loading {
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 176, 102, .5) 0 60px, rgba(255, 176, 102, .12) 61px 170px, transparent 171px),
    linear-gradient(180deg, #5a2a58 0%, #2c1842 55%, #170d26 100%);
}

/* ------------------------------------------------------------------ type */
:root[data-skin="kavir"] .scr-head h2,
:root[data-skin="kavir"] .sheet h3,
:root[data-skin="kavir"] .hero h3,
:root[data-skin="kavir"] .confirm-big h3,
:root[data-skin="kavir"] .w3-res-big b {
  font-family: var(--kv-display); font-weight: 400; letter-spacing: 0;
}
:root[data-skin="kavir"] .scr-head h2 { font-size: 26px; color: #ffe4bd; }
:root[data-skin="kavir"] .sheet h3 { font-size: 22px; }
:root[data-skin="kavir"] .sec-title { color: #f3d3c0; }
:root[data-skin="kavir"] .sec-title::after { background: linear-gradient(90deg, rgba(255, 196, 150, 0), rgba(255, 196, 150, .45)); }
:root[data-skin="kavir"] .ar-power, :root[data-skin="kavir"] [data-power] {
  font-family: var(--kv-display); font-weight: 400; color: #fff2dc;
}

/* ------------------------------------------------------------------ buttons: soft and round */
:root[data-skin="kavir"] .btn {
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--edge), 0 8px 18px -10px rgba(255, 160, 90, .55), inset 0 1px 0 rgba(255, 255, 255, .28);
}
:root[data-skin="kavir"] .btn.icon { border-radius: 50%; }
:root[data-skin="kavir"] .btn.primary { --f1: #ffe6bf; --f2: #ffc27e; --edge: #b5652f; --fg: #3a1d22; text-shadow: none; }
:root[data-skin="kavir"] .btn.success { --f1: #ffa76a; --f2: #ee7b3d; --edge: #8f3916; --fg: #2a0f0b; }
:root[data-skin="kavir"] .btn.danger { --f1: #c65073; --f2: #922f4d; --edge: #4f1227; --fg: #ffeae6; }
:root[data-skin="kavir"] .btn.neutral { --f1: #5c3b70; --f2: #3f2753; --edge: #1f1130; --fg: #fbeede; }
:root[data-skin="kavir"] .btn.ghost { --f1: rgba(255, 220, 190, .1); --f2: rgba(255, 220, 190, .04); --edge: rgba(20, 6, 30, .4); }

/* ------------------------------------------------------------------ surfaces */
:root[data-skin="kavir"] .card {
  border-color: rgba(255, 200, 160, .14);
  border-radius: 20px;
}
:root[data-skin="kavir"] .sheet { border-top-color: rgba(255, 196, 150, .4); }
:root[data-skin="kavir"] .sheet .handle { background: rgba(255, 210, 170, .35); }
:root[data-skin="kavir"] .backdrop { background: rgba(18, 6, 28, .62); }

/* ------------------------------------------------------------------ dock */
:root[data-skin="kavir"] .tabbar {
  background: linear-gradient(180deg, rgba(58, 30, 74, .94), rgba(28, 14, 42, .98));
  border-top-color: rgba(255, 190, 140, .3);
}
:root[data-skin="kavir"] .tab.on { color: #ffe4bd; }
:root[data-skin="kavir"] .tab.on .plate {
  background: linear-gradient(180deg, #ffd9a6, #ffb36f);
  box-shadow: 0 6px 16px -6px rgba(255, 160, 90, .7);
  color: #3a1d22;
}
:root[data-skin="kavir"] .tab.on .plate .ic { color: #3a1d22; }

/* ------------------------------------------------------------------ pills keep meaning, warmer tones */
:root[data-skin="kavir"] .pill.green { color: #dcffd2; background: rgba(159, 227, 154, .15); border-color: rgba(159, 227, 154, .3); }
:root[data-skin="kavir"] .pill.red { color: #ffd4cc; background: rgba(255, 138, 120, .16); border-color: rgba(255, 138, 120, .32); }
:root[data-skin="kavir"] .pill.blue { color: #e6dcff; background: rgba(196, 170, 255, .16); border-color: rgba(196, 170, 255, .3); }

@media (prefers-reduced-motion: no-preference) {
  :root[data-skin="kavir"] .tab.on .plate { transition: transform .35s var(--ease-spring), background .3s ease; }
}

/* ------------------------------------------------------------------ dusk light on every screen */
:root[data-skin="kavir"] .screen,
:root[data-skin="kavir"] .guided-home .screen[data-screen=home] {
  background:
    radial-gradient(120% 46% at 88% -8%, rgba(255, 150, 90, .2), transparent 62%),
    radial-gradient(90% 40% at 0% 100%, rgba(140, 50, 110, .18), transparent 70%),
    linear-gradient(180deg, rgba(64, 30, 78, .93), rgba(30, 16, 46, .95) 38%, rgba(24, 13, 38, .96));
}

/* ------------------------------------------------------------------ the army's hero: a sunset card */
:root[data-skin="kavir"] .ar-hero {
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 226, 170, .45) 0 38px, transparent 90px),
    linear-gradient(165deg, #f39256 0%, #c8553d 52%, #6a2c5c 100%);
  border-color: rgba(255, 220, 180, .45);
  box-shadow: 0 14px 30px -12px rgba(200, 85, 61, .65), inset 0 1px 0 rgba(255, 255, 255, .3);
}
:root[data-skin="kavir"] .ar-hero, :root[data-skin="kavir"] .ar-hero small, :root[data-skin="kavir"] .ar-hero .sub {
  color: #fff3e6;
}
:root[data-skin="kavir"] .ar-hero [data-power] { color: #fffaf2; text-shadow: 0 2px 10px rgba(90, 20, 40, .35); }