/* --- base.css --- */

/* Dark theme tokens — default color scheme, all CSS custom properties */
/* Vazirmatn font — local woff2, used for Persian RTL mode */
@font-face{font-family:'Vazirmatn';src:url('/s.php?f=assets/fonts/Vazirmatn-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('/s.php?f=assets/fonts/Vazirmatn-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('/s.php?f=assets/fonts/Vazirmatn-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('/s.php?f=assets/fonts/Vazirmatn-ExtraBold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}

:root,
[data-theme="dark"]{
  color-scheme:dark;
  --clr-bg:#0a0e17;
  --clr-bg-alt:#0f1524;
  --clr-card:#131b2e;
  --clr-border:#1e2a45;
  --clr-text:#e6edf7;
  --clr-muted:#8b9bb8;
  --clr-accent:#00e5a0;
  --clr-accent-2:#3b82f6;
  --clr-accent-3:#a855f7;
  --clr-accent-4:#22d3ee;
  --clr-accent-5:#f59e0b;
  --clr-danger:#ff5c7a;
  --clr-nav-bg:rgba(10,14,23,.8);
  --clr-accent-soft:rgba(0,229,160,.06);
  --glow-a:rgba(59,130,246,.12);
  --glow-b:rgba(0,229,160,.08);
  --card-shadow:none;
  --font-body:'Segoe UI',system-ui,-apple-system,sans-serif;
  --font-mono:'Cascadia Code','Fira Code','Courier New',monospace;
  --radius:12px;
  --radius-sm:8px;
  --transition:.25s ease;
  --container:1140px;
}

/* Light theme tokens — override colours for light mode */
[data-theme="light"]{
  color-scheme:light;
  --clr-bg:#f3f6fb;
  --clr-bg-alt:#e8edf6;
  --clr-card:#ffffff;
  --clr-border:#d4ddeb;
  --clr-text:#0f1a2c;
  --clr-muted:#54637c;
  --clr-accent:#00a374;
  --clr-accent-2:#2f6fed;
  --clr-accent-3:#7c3aed;
  --clr-accent-4:#0891b2;
  --clr-accent-5:#d97706;
  --clr-danger:#d92d4b;
  --clr-nav-bg:rgba(255,255,255,.85);
  --clr-accent-soft:rgba(0,163,116,.09);
  --glow-a:rgba(47,111,237,.10);
  --glow-b:rgba(0,163,116,.09);
  --card-shadow:0 6px 20px rgba(15,26,44,.07);
}

/* Universal reset — zero margin/padding, border-box everywhere */
*,
*::before,
*::after{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* html — prevent smooth scroll (handled by JS) */
html{
  scroll-behavior:auto;
}

/* Body — base font, bg, text colour, antialiasing */
body{
  font-family:var(--font-body);
  background:var(--clr-bg);
  color:var(--clr-text);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  opacity:1;
  transition:opacity .25s ease;
}

/* Page fade-out on navigation */
body.is-fading{
  opacity:0;
}

/* Responsive images */
img{
  max-width:100%;
  display:block;
}

/* Remove default link underline */
a{
  color:inherit;
  text-decoration:none;
}

/* Remove list bullets */
ul{
  list-style:none;
}

/* Reset button — inherit font, no border/background */
button{
  font:inherit;
  cursor:pointer;
  border:none;
  background:none;
  color:inherit;
}

/* Inherit font for form inputs */
input,
textarea{
  font:inherit;
  color:inherit;
}

/* Accent-coloured text selection */
::selection{
  background:var(--clr-accent);
  color:#04120c;
}

/* Custom scrollbar — thin, border-coloured, accent on hover */
::-webkit-scrollbar{
  width:10px;
}

::-webkit-scrollbar-track{
  background:var(--clr-bg);
}

::-webkit-scrollbar-thumb{
  background:var(--clr-border);
  border-radius:5px;
}

::-webkit-scrollbar-thumb:hover{
  background:var(--clr-accent);
}

/* Container — centred, responsive width clamp */
.container{
  width:min(100% - 3rem, var(--container));
  margin-inline:auto;
}

/* Section — vertical spacing */
.section{
  padding:5.5rem 0;
}

/* Section title — responsive font, prepended with #  */
.section__title{
  font-size:clamp(1.6rem,3vw,2rem);
  margin-bottom:.4rem;
}

.section__title::before{
  content:'# ';
  color:var(--clr-accent);
  font-family:var(--font-mono);
}

/* Section subtitle — muted under heading */
.section__sub{
  color:var(--clr-muted);
  margin-bottom:2.8rem;
}

/* Reveal utility — hidden until scrolled into view */
[data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s ease,transform .6s ease;
}

[data-reveal].is-visible{
  opacity:1;
  transform:none;
}

/* Disable reveal animation for reduced motion */
@media (prefers-reduced-motion:reduce){
  [data-reveal]{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* RTL overrides for Persian — text flows right, terminal/code stay LTR */
html.rtl{font-family:'Vazirmatn',var(--font-body)}
html.rtl .section__title::before{content:'# '}
html.rtl .hero__roles-prefix,
html.rtl .page-hero__tag,
html.rtl .terminal, html.rtl .codeditor,
html.rtl pre, html.rtl code, html.rtl .tag, html.rtl .slot__tip,
html.rtl .terminal *,.codeditor *{direction:ltr;unicode-bidi:embed}
html.rtl .navbar__menu{direction:rtl}
html.rtl .navbar__actions{direction:ltr}
html.rtl .hero__layout,
html.rtl .about__grid,
html.rtl .footer__grid{direction:rtl}
html.rtl p,html.rtl h1,html.rtl h2,html.rtl h3,
html.rtl .section__sub,html.rtl .hero__desc,
html.rtl .stat__label,html.rtl .card__text,
html.rtl .btn,html.rtl .footer__col a{direction:rtl}

/* Language toggle button */
.lang-toggle{
  font-family:'Vazirmatn',var(--font-mono);
  font-size:.75rem;font-weight:700;
  width:36px;height:36px;
  display:grid;place-items:center;
  border:1px solid var(--clr-border);
  border-radius:50%;
  color:var(--clr-muted);
  background:transparent;
  transition:color .25s ease,border-color .25s ease,transform .25s ease;
  cursor:pointer;
}
.lang-toggle:hover{
  color:var(--clr-accent);
  border-color:var(--clr-accent);
  transform:scale(1.1);
}