/* «فیروزه»: Isfahan tilework.  Lapis surfaces, turquoise accents, gold titles, ivory
   text, a faint girih pattern behind every screen and Reem Kufi for headings.  Every
   colour token is mapped in skin-firuze.gen.css (generated); this file sets the palette
   and the hand-tuned parts.  Active when <html data-skin="firuze">. */

@font-face {
  font-family: "Reem Kufi";
  src: url("../fonts/reem-kufi-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-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Reem Kufi";
  src: url("../fonts/reem-kufi-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-weight: 700;
  font-display: swap;
}

:root[data-skin="firuze"] {
  --bg0: #081633; --bg1: #0c1f45; --bg2: #12295a;
  --panel1: #133066; --panel2: #0c1f45;
  --glass1: rgba(18, 48, 104, .74); --glass2: rgba(8, 24, 56, .72);
  --gold: #f2c86b; --gold-hi: #ffe3a3; --gold-lo: #a97a1f;
  --text: #f4ecdc; --text-2: #c9d3e6; --text-3: #93a6c8;
  --edge: rgba(242, 200, 107, .22); --edge-2: rgba(54, 209, 196, .12);
  --green: #4fe0b6; --red: #ff7b65; --blue: #7cc4ff; --purple: #b9a7ff; --cyan: #36d1c4;
  --glass-face: linear-gradient(150deg, rgba(28, 74, 150, .36), rgba(8, 24, 58, .78));
  --screen-face: rgba(9, 24, 56, .9);
  --sheet-face: linear-gradient(165deg, rgba(20, 56, 120, .97), rgba(8, 22, 54, .98));
  --glass-shadow: inset 0 1px rgba(242, 200, 107, .14), 0 10px 28px rgba(2, 8, 24, .45);
  --radius: 16px;
  --fz-display: "Reem Kufi", "Vazirmatn", Tahoma, sans-serif;
  --fz-girih: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%2336d1c4' stroke-opacity='.075' stroke-width='1'%3E%3Crect x='18' y='18' width='28' height='28'/%3E%3Crect x='18' y='18' width='28' height='28' transform='rotate(45 32 32)'/%3E%3Ccircle cx='32' cy='32' r='6'/%3E%3Cpath d='M0 0L18 18M64 0L46 18M0 64L18 46M64 64L46 46'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: dark;
}

/* ------------------------------------------------------------------ ground */
:root[data-skin="firuze"] body { background: radial-gradient(120% 70% at 50% 0%, #143472, #0a1a3c 55%, #061127); }
:root[data-skin="firuze"] .map-shade {
  background: linear-gradient(rgba(8, 22, 54, .4), transparent 22%, transparent 68%, rgba(6, 17, 39, .55));
}
:root[data-skin="firuze"] .map-dim { background: rgba(8, 22, 54, .22); }
:root[data-skin="firuze"] #loading {
  background: var(--fz-girih) 0 0 / 64px 64px, radial-gradient(120% 80% at 50% 38%, #163a7e 0%, #0a1a3c 50%, #050c1e 100%);
}
:root[data-skin="firuze"] .screen,
:root[data-skin="firuze"] .guided-home .screen[data-screen=home] {
  background:
    var(--fz-girih) 0 0 / 64px 64px,
    radial-gradient(120% 40% at 50% -6%, rgba(54, 209, 196, .12), transparent 62%),
    linear-gradient(180deg, rgba(16, 42, 94, .94), rgba(9, 24, 56, .95) 40%, rgba(7, 19, 46, .96));
}

/* ------------------------------------------------------------------ type */
:root[data-skin="firuze"] .scr-head h2,
:root[data-skin="firuze"] .sheet h3,
:root[data-skin="firuze"] .hero h3,
:root[data-skin="firuze"] .confirm-big h3,
:root[data-skin="firuze"] .w3-res-big b {
  font-family: var(--fz-display); font-weight: 700; letter-spacing: 0;
}
:root[data-skin="firuze"] .scr-head h2 { font-size: 25px; color: #f2c86b; }
:root[data-skin="firuze"] .sec-title { color: #d8e2f2; }
:root[data-skin="firuze"] .sec-title::after { background: linear-gradient(90deg, rgba(242, 200, 107, 0), rgba(242, 200, 107, .45)); }
:root[data-skin="firuze"] [data-power] { color: #4fe8da; }

/* ------------------------------------------------------------------ buttons: glazed tiles */
:root[data-skin="firuze"] .btn { border-radius: 14px; }
:root[data-skin="firuze"] .btn.primary { --f1: #f7d98c; --f2: #d9a441; --edge: #8a5f12; --fg: #2a1b05; text-shadow: none; }
:root[data-skin="firuze"] .btn.success { --f1: #4fe8da; --f2: #13a59a; --edge: #0a645d; --fg: #03211f; }
:root[data-skin="firuze"] .btn.danger { --f1: #ff8f7a; --f2: #d8452f; --edge: #7d1d10; --fg: #fff; }
:root[data-skin="firuze"] .btn.neutral { --f1: #24498f; --f2: #173269; --edge: #081633; --fg: #f4ecdc; }
:root[data-skin="firuze"] .btn.ghost { --f1: rgba(124, 196, 255, .1); --f2: rgba(124, 196, 255, .04); --edge: rgba(2, 8, 24, .45); }

/* ------------------------------------------------------------------ surfaces */
:root[data-skin="firuze"] .card { border-color: rgba(54, 209, 196, .16); }
:root[data-skin="firuze"] .sheet { border-top-color: rgba(242, 200, 107, .45); }
:root[data-skin="firuze"] .sheet .handle { background: rgba(242, 200, 107, .4); }
:root[data-skin="firuze"] .backdrop { background: rgba(2, 8, 24, .62); }

/* ------------------------------------------------------------------ dock */
:root[data-skin="firuze"] .tabbar {
  background: linear-gradient(180deg, rgba(14, 38, 86, .95), rgba(6, 17, 40, .98));
  border-top-color: rgba(242, 200, 107, .35);
}
:root[data-skin="firuze"] .tab.on { color: #f2c86b; }
:root[data-skin="firuze"] .tab.on .plate {
  background: linear-gradient(180deg, #4fe8da, #17b0a4);
  box-shadow: 0 6px 16px -6px rgba(54, 209, 196, .7), inset 0 1px 0 rgba(255, 255, 255, .35);
  color: #06233f;
}
:root[data-skin="firuze"] .tab.on .plate .ic { color: #06233f; }

/* ------------------------------------------------------------------ the army's hero: a glazed lapis tile */
:root[data-skin="firuze"] .ar-hero {
  background:
    var(--fz-girih) 0 0 / 48px 48px,
    radial-gradient(circle at 88% 0%, rgba(54, 209, 196, .28), transparent 60%),
    linear-gradient(160deg, #1a4a9a, #0d2a62 60%, #0a1f4c);
  border: 1px solid rgba(242, 200, 107, .55);
  box-shadow: 0 14px 30px -14px rgba(8, 30, 80, .9), inset 0 1px 0 rgba(255, 233, 180, .3);
}

/* ------------------------------------------------------------------ pills keep meaning */
:root[data-skin="firuze"] .pill.green { color: #c9fff0; background: rgba(79, 224, 182, .15); border-color: rgba(79, 224, 182, .32); }
:root[data-skin="firuze"] .pill.red { color: #ffd6cf; background: rgba(255, 123, 101, .16); border-color: rgba(255, 123, 101, .32); }
:root[data-skin="firuze"] .pill.blue { color: #dbeeff; background: rgba(124, 196, 255, .16); border-color: rgba(124, 196, 255, .3); }