/* ==========================================================================
   01 — TOKENS
   متغیرهای طراحی: رنگ‌ها، شیشه، شعاع‌ها، مقیاس فونت، حرکت + تم روشن + فونت
   ========================================================================== */

/* Firefox scrollbar support */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

/* Custom Font */
@font-face {
  font-family: 'Vazirmatn';
  src: url('vazirmatn.woff2') format('woff2 supports variations'),
       url('vazirmatn.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


/*---------------*\
  CUSTOM PROPERTY
\*---------------*/
:root {
  color-scheme: dark;

  /* ---- palette (same accents as the original template) ---- */
  --bg-0: #07080d;
  --bg-1: #0d0f17;
  --ink-0: #ffffff;
  --ink-1: #f2f4f8;
  --ink-2: hsla(220, 20%, 92%, 0.78);
  --ink-3: hsla(220, 20%, 92%, 0.66);

  --cyan-blue: hsl(210, 100%, 68%);
  --purple-blue: hsl(250, 100%, 74%);
  --gold: hsl(42, 100%, 70%);
  --rose: hsl(340, 90%, 72%);

  --accent-grad: linear-gradient(135deg, var(--cyan-blue) 0%, var(--purple-blue) 100%);
  --btn-grad: linear-gradient(135deg, hsl(214, 100%, 47%) 0%, hsl(252, 85%, 60%) 100%);   /* دکمه‌ها: متن سفید خوانا */
  --gold-grad: linear-gradient(135deg, hsl(48, 100%, 76%) 0%, hsl(32, 100%, 66%) 100%);
  --scrollbar-thumb: hsla(0, 0%, 100%, 0.22);

  /* ---- glass system ---- */
  --glass-fill: linear-gradient(150deg,
    hsla(0, 0%, 100%, 0.14) 0%,
    hsla(0, 0%, 100%, 0.05) 42%,
    hsla(0, 0%, 100%, 0.09) 100%);
  --glass-fill-soft: linear-gradient(150deg,
    hsla(0, 0%, 100%, 0.11) 0%,
    hsla(0, 0%, 100%, 0.05) 100%), hsla(230, 25%, 12%, 0.35);
  --glass-fill-strong: linear-gradient(150deg,
    hsla(230, 25%, 22%, 0.62) 0%,
    hsla(230, 25%, 12%, 0.7) 100%);
  --glass-blur: blur(12px);
  --glass-blur-light: none; /* inner cards: no blur, semi-opaque fill instead */
  --glass-border: hsla(0, 0%, 100%, 0.16);
  --glass-edge: inset 0 1px 0 hsla(0, 0%, 100%, 0.28), inset 0 -1px 0 hsla(0, 0%, 100%, 0.04);
  --glass-shadow: 0 12px 32px hsla(0, 0%, 0%, 0.34);
  --glass-shadow-sm: 0 4px 14px hsla(0, 0%, 0%, 0.26);
  --glow-blue: 0 0 0 1px hsla(210, 100%, 70%, 0.25), 0 6px 18px hsla(210, 100%, 60%, 0.24);

  /* ---- theme tokens (dark values; light overrides below) ---- */
  --on-accent: #ffffff;                       /* text on gradient buttons */
  --on-media: #ffffff;                        /* text/icons over photos */
  --line-soft: hsla(0, 0%, 100%, 0.08);
  --line: hsla(0, 0%, 100%, 0.1);
  --sep: hsla(0, 0%, 100%, 0.16);
  --chip-bg: hsla(0, 0%, 100%, 0.08);
  --hover-bg: hsla(0, 0%, 100%, 0.1);
  --track-bg: hsla(0, 0%, 100%, 0.07);
  --track-inset: inset 0 1px 2px hsla(0, 0%, 0%, 0.35);
  --rim-1: hsla(0, 0%, 100%, 0.55);
  --rim-2: hsla(0, 0%, 100%, 0.06);
  --rim-3: hsla(0, 0%, 100%, 0.02);
  --rim-4: hsla(0, 0%, 100%, 0.28);
  --nav-bg: hsla(230, 25%, 16%, 0.5);
  --nav-bg-desktop: hsla(230, 25%, 16%, 0.55);
  --overlay-bg: hsla(230, 30%, 4%, 0.55);
  --modal-shadow: 0 30px 80px hsla(0, 0%, 0%, 0.5);
  --dot-ring: var(--bg-1);
  --veil-hover: hsla(230, 30%, 5%, 0.5);
  --soon-bg: hsla(230, 30%, 8%, 0.72);
  --toast-bg: hsla(230, 25%, 12%, 0.92);
  --solid-surface: hsl(230, 25%, 13%);
  --lite-card: linear-gradient(150deg, hsla(230, 22%, 20%, 0.9), hsla(230, 25%, 11%, 0.94));
  --lite-nav: hsla(230, 25%, 14%, 0.95);
  --lite-overlay: hsla(230, 30%, 4%, 0.8);
  --map-filter: grayscale(1) invert(1) contrast(0.9);
  /* کاشی لوگوها: دارک = تیره + لوگوی سفید تک‌رنگ (لوگوها تیره‌اند)، لایت = روشن + رنگ اصلی */
  --logo-plate: var(--glass-fill-soft);
  --logo-filter: brightness(0) invert(1) opacity(0.9);
  --logo-filter-hover: brightness(0) invert(1);
  --accent-text: var(--purple-blue);          /* small coloured text on glass */

  /* ---- radius scale ---- */
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* ---- fluid type scale (used everywhere, no stray sizes) ---- */
  --fs-h2: clamp(1.5rem, 1.15rem + 1.3vw, 2.1rem);      /* article titles */
  --fs-h3: clamp(1.2rem, 1.06rem + 0.6vw, 1.5rem);      /* section titles */
  --fs-h4: clamp(1.02rem, 0.96rem + 0.3vw, 1.15rem);    /* card titles */
  --fs-body: clamp(0.94rem, 0.9rem + 0.16vw, 1.02rem);  /* paragraphs */
  --fs-small: 0.875rem;                                 /* secondary text */
  --fs-caption: 0.8125rem;                              /* meta / chips */
  --fs-micro: 0.75rem;                                  /* labels / nav */

  /* font-weight */
  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  --t-fast: 0.22s var(--ease-out);
  --t-med: 0.45s var(--ease-out);
  --t-slow: 0.7s var(--ease-out);
}


/* ================= LIGHT THEME — ملایم و کم‌خیره‌کننده (Frosted Slate) =================
   پایه‌ی خاکستری-آبی (نه سفید)، شیشه‌ی نیمه‌شفاف و همان رنگ‌های آبی/بنفش تم تاریک */
html[data-theme="light"] {
  color-scheme: light;
  --bg-0: #c7cfe2;
  --bg-1: #d6dcec;
  --ink-0: hsl(228, 45%, 11%);
  --ink-1: hsl(228, 38%, 16%);
  --ink-2: hsla(228, 32%, 16%, 0.88);
  --ink-3: hsla(228, 30%, 17%, 0.76);

  --cyan-blue: hsl(210, 100%, 36%);
  --purple-blue: hsl(250, 75%, 50%);
  --rose: hsl(340, 80%, 50%);
  --accent-grad: linear-gradient(135deg, hsl(212, 95%, 44%) 0%, hsl(250, 80%, 55%) 100%);
  --btn-grad: linear-gradient(135deg, hsl(214, 95%, 42%) 0%, hsl(252, 80%, 52%) 100%);
  --scrollbar-thumb: hsla(228, 40%, 25%, 0.35);

  --glass-fill: linear-gradient(150deg,
    hsla(0, 0%, 100%, 0.5) 0%,
    hsla(0, 0%, 100%, 0.26) 45%,
    hsla(0, 0%, 100%, 0.4) 100%);
  --glass-fill-soft: linear-gradient(150deg,
    hsla(0, 0%, 100%, 0.44) 0%,
    hsla(0, 0%, 100%, 0.2) 100%), hsla(228, 40%, 90%, 0.18);
  --glass-fill-strong: linear-gradient(150deg,
    hsla(228, 50%, 97%, 0.96) 0%,
    hsla(228, 45%, 93%, 0.96) 100%);
  --glass-border: hsla(228, 40%, 25%, 0.2);
  --glass-edge: inset 0 1px 0 hsla(0, 0%, 100%, 0.7), inset 0 -1px 0 hsla(228, 40%, 25%, 0.06);
  --glass-shadow: 0 12px 32px hsla(228, 45%, 25%, 0.22);
  --glass-shadow-sm: 0 4px 14px hsla(228, 45%, 25%, 0.16);
  --glow-blue: 0 0 0 1px hsla(212, 95%, 45%, 0.3), 0 6px 18px hsla(212, 95%, 45%, 0.22);

  --line-soft: hsla(228, 40%, 25%, 0.12);
  --line: hsla(228, 40%, 25%, 0.18);
  --sep: hsla(228, 40%, 25%, 0.2);
  --chip-bg: hsla(228, 45%, 30%, 0.12);
  --hover-bg: hsla(228, 45%, 30%, 0.14);
  --track-bg: hsla(228, 45%, 30%, 0.16);
  --track-inset: inset 0 1px 2px hsla(228, 45%, 25%, 0.25);
  --rim-1: hsla(0, 0%, 100%, 0.9);
  --rim-2: hsla(0, 0%, 100%, 0.3);
  --rim-3: hsla(228, 40%, 25%, 0.05);
  --rim-4: hsla(228, 40%, 25%, 0.18);
  --nav-bg: hsla(228, 40%, 94%, 0.74);
  --nav-bg-desktop: hsla(228, 40%, 94%, 0.76);
  --overlay-bg: hsla(228, 40%, 16%, 0.45);
  --modal-shadow: 0 30px 80px hsla(228, 45%, 20%, 0.35);
  --veil-hover: hsla(228, 40%, 8%, 0.5);
  --soon-bg: hsla(228, 40%, 10%, 0.78);
  --toast-bg: hsla(228, 50%, 97%, 0.96);
  --solid-surface: hsl(228, 45%, 95%);
  --lite-card: linear-gradient(150deg, hsl(228, 40%, 91%), hsl(228, 38%, 86%));
  --lite-nav: hsl(228, 40%, 92%);
  --lite-overlay: hsla(228, 40%, 16%, 0.7);
  --map-filter: grayscale(0.2) brightness(0.94) contrast(0.96);
  --logo-plate: hsla(0, 0%, 100%, 0.82);
  --logo-filter: none;
  --logo-filter-hover: none;
  --accent-text: var(--purple-blue);
}