/* ==== IRANSans faces (merged into base.css) ==== */
@font-face{
  font-family:"IRANSans";
  src:url("../fonts/IRANSans_UltraLight.woff2") format("woff2"),
      url("../fonts/IRANSans_UltraLight.woff") format("woff");
  font-weight:200; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face{
  font-family:"IRANSans";
  src:url("../fonts/IRANSans_Light.woff2") format("woff2"),
      url("../fonts/IRANSans_Light.woff") format("woff");
  font-weight:300; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face{
  font-family:"IRANSans";
  src:url("../fonts/IRANSans.woff2") format("woff2"),
      url("../fonts/IRANSans.woff") format("woff");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face{
  font-family:"IRANSans";
  src:url("../fonts/IRANSans_Medium.woff2") format("woff2"),
      url("../fonts/IRANSans_Medium.woff") format("woff");
  font-weight:500; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face{
  font-family:"IRANSans";
  src:url("../fonts/IRANSans_Bold.woff2") format("woff2"),
      url("../fonts/IRANSans_Bold.woff") format("woff");
  font-weight:700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face{
  font-family:"IRANSans";
  src:url("../fonts/IRANSans_Black.woff2") format("woff2"),
      url("../fonts/IRANSans_Black.woff") format("woff");
  font-weight:900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF;
}

/* ==== Shekari • Base (tokens + reset + typography + utilities) ==== */

/* Light (default) */
:root{
  /* Brand (blue) */
  --brand-700:#0f5096;
  --brand-600:#4054b2;
  --brand-500:#4054b2;
  --brand-400:color-mix(in oklab, var(--brand-500), white 12%);
  --brand-300:color-mix(in oklab, var(--brand-500), white 24%);
  --brand-200:color-mix(in oklab, var(--brand-500), white 36%);
  --brand-100:color-mix(in oklab, var(--brand-500), white 52%);

  /* Accent (green) */
  --accent-700:#1e8e49;
  --accent-600:#23a455;
  --accent-500:#23a455;
  --accent-400:color-mix(in oklab, var(--accent-500), white 12%);
  --accent-300:color-mix(in oklab, var(--accent-500), white 24%);
  --accent-200:color-mix(in oklab, var(--accent-500), white 36%);
  --accent-100:color-mix(in oklab, var(--accent-500), white 52%);

  /* Semantic neutrals */
  --fg:#0b1220;
  --muted:#4a5568;
  --bg:#ffffff;
  --surface:color-mix(in oklab, var(--bg), black 3%);
  --surface-2:color-mix(in oklab, var(--bg), black 6%);
  --border:color-mix(in oklab, #000, transparent 88%);
  --ring:color-mix(in oklab, var(--brand-500), transparent 70%);

  /* Status */
  --success:var(--accent-600);
  --danger:#e4504d;
  --warn:#e7a23b;
  --info:#3aa3e3;

  /* Typography scale + global family */
  --font:16px/1.65 "IRANSans", system-ui, Segoe UI, Roboto, Ubuntu;
  --h1:clamp(26px,4.4vw,40px);
  --h2:clamp(22px,3.6vw,32px);
  --h3:clamp(20px,3.0vw,26px);
  --h4:clamp(18px,2.6vw,22px);
  --h5:clamp(17px,2.4vw,20px);
  --h6:clamp(16px,2.2vw,18px);

  /* Layout tokens */
  --radius:16px;
  --radius-sm:12px;
  --radius-xs:10px;
  --shadow-sm:0 4px 10px color-mix(in oklab, #000, transparent 92%);
  --shadow-md:0 10px 30px color-mix(in oklab, #000, transparent 88%);
  --container:max(92%, 1200px);

  /* Links */
  --link:var(--brand-600);
  --link-hover:var(--brand-700);
}

/* Dark (forced) */
:root[data-theme="dark"]{
  --fg:#e6eef7; --muted:#9aa7b4; --bg:#0a0f17;
  --surface:color-mix(in oklab, var(--bg), white 6%);
  --surface-2:color-mix(in oklab, var(--bg), white 10%);
  --border:color-mix(in oklab, #fff, transparent 90%);
  --ring:color-mix(in oklab, var(--brand-300), transparent 60%);
}

/* System dark when not forced */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --fg:#e6eef7; --muted:#9aa7b4; --bg:#0a0f17;
    --surface:color-mix(in oklab, var(--bg), white 6%);
    --surface-2:color-mix(in oklab, var(--bg), white 10%);
    --border:color-mix(in oklab, #fff, transparent 90%);
    --ring:color-mix(in oklab, var(--brand-300), transparent 60%);
  }
}

/* ---------- Reset / Base ---------- */
html{ box-sizing:border-box; }
*,*::before,*::after{ box-sizing:inherit; }
html,body{ margin:0; padding:0; }
body{
  color:var(--fg);
  background:var(--bg);
  font:var(--font);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg,video,canvas{ display:block; max-width:100%; height:auto; }
svg{ fill:currentColor; }
a{ color:var(--link); text-decoration:none; }
a:hover{ color:var(--link-hover); text-decoration:underline; text-underline-offset:2px; }
abbr[title]{ text-decoration:underline dotted; }
code,kbd,samp{ font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.95em; }
pre{ overflow:auto; padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
hr{ border:0; border-top:1px solid var(--border); margin:1.5rem 0; }

/* ---------- Typography (elements) ---------- */
h1,h2,h3,h4,h5,h6{
  margin:0 0 .6em 0; font-weight:800; line-height:1.2; letter-spacing:.2px;
}
h1{ font-size:var(--h1); }
h2{ font-size:var(--h2); }
h3{ font-size:var(--h3); }
h4{ font-size:var(--h4); }
h5{ font-size:var(--h5); }
h6{ font-size:var(--h6); }

p{ margin:0 0 1em 0; }
small{ font-size:.875em; opacity:.9; }
strong{ font-weight:700; }
blockquote{
  margin:1rem 0; padding:.8rem 1rem;
  border-inline-start:4px solid var(--brand-600);
  background:color-mix(in oklab, var(--brand-100), transparent 88%);
  border-radius:12px;
}

/* Lists */
ul,ol{ margin:0 0 1em 0; padding-inline-start:1.2em; }
li{ margin:.25em 0; }

/* Tables */
table{ width:100%; border-collapse:collapse; }
th,td{ border:1px solid var(--border); padding:.6rem .7rem; }
thead th{ background:var(--surface); }

/* Forms (base primitives only) */
input,textarea,select,button{
  font:inherit; color:inherit; background:transparent; border:0; outline:0;
}
button{ cursor:pointer; }
:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }

/* Primitive fields */
.sk-input, .sk-select, .sk-textarea{
  display:block; width:100%; padding:10px 12px;
  border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--fg);
}
.sk-input:focus, .sk-select:focus, .sk-textarea:focus{ outline:2px solid var(--ring); outline-offset:2px; }

/* Primitive button */
.sk-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:40px; padding:0 16px; border-radius:12px; border:1px solid var(--border);
  background:var(--surface); color:var(--fg); user-select:none; box-shadow:var(--shadow-sm);
}
.sk-btn:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }
.sk-btn--primary{ background:var(--brand-600); color:#fff; border-color:transparent; }
.sk-btn--primary:hover{ background:var(--brand-700); }
.sk-btn--success{ background:var(--accent-600); color:#fff; border-color:transparent; }

/* ---------- Utilities (generic, non-component) ---------- */
.container{ width:min(var(--container), 100%); margin-inline:auto; }
.max-content{ max-width:var(--container); margin-inline:auto; }

.hidden{ display:none !important; }
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.round{ border-radius:var(--radius); }
.round-sm{ border-radius:var(--radius-sm); }
.border{ border:1px solid var(--border); }
.surface{ background:var(--surface); }
.surface-2{ background:var(--surface-2); }
.shadow-sm{ box-shadow:var(--shadow-sm); }
.shadow-md{ box-shadow:var(--shadow-md); }

.mt-0{ margin-top:0!important; } .mb-0{ margin-bottom:0!important; }
.mt-1{ margin-top:.5rem!important; } .mb-1{ margin-bottom:.5rem!important; }
.mt-2{ margin-top:1rem!important; } .mb-2{ margin-bottom:1rem!important; }
.mt-3{ margin-top:1.5rem!important; } .mb-3{ margin-bottom:1.5rem!important; }
.pt-1{ padding-top:.5rem!important; } .pb-1{ padding-bottom:.5rem!important; }
.pt-2{ padding-top:1rem!important; } .pb-2{ padding-bottom:1rem!important; }
.pt-3{ padding-top:1.5rem!important; } .pb-3{ padding-bottom:1.5rem!important; }
.px-1{ padding-inline:.5rem!important; } .px-2{ padding-inline:1rem!important; } .px-3{ padding-inline:1.5rem!important; }