/* =========================================================
   BASE — reset, design tokens, typography, language toggling
   Load order: this file loads first; everything else depends
   on the custom properties and [data-fa]/[data-en] rules here.
   ========================================================= */

:root{
  --paper:      #FFFDF8;
  --ink:        #14120F;
  --teal:       #00BEAE;
  --cyan:       #00AFCF;
  --purple:     #C980DB;
  --orange:     #FF8048;
  --coral:      #FF7346;
  --yellow:     #FCCB30;

  --border-w:   3px;
  --radius-lg:  28px;
  --radius-md:  18px;
  --shadow-pop:    6px 6px 0 var(--ink);
  --shadow-pop-sm: 4px 4px 0 var(--ink);

  --ff-display: 'Archivo Black', 'Vazirmatn', sans-serif;
  --ff-body:    'Space Grotesk', 'Vazirmatn', sans-serif;
  --ff-hand:    'Caveat', 'Vazirmatn', cursive;
  --ff-fa:      'Vazirmatn', 'Space Grotesk', sans-serif;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ff-fa);
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
html[dir="ltr"] body{ font-family:var(--ff-body); }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font:inherit; cursor:pointer; border:none; background:none; }
h1,h2,h3,h4,p{ margin:0; }
section{ position:relative; }

/* ---------- language toggling (core mechanism) ---------- */
[data-en]{ display:none; }
html[dir="ltr"] [data-en]{ display:revert; }
html[dir="ltr"] [data-fa]{ display:none; }
html[dir="ltr"] .ff-display{ font-family:var(--ff-display); }
html[dir="ltr"] .ff-hand{ font-family:var(--ff-hand); }
.ff-display, .ff-hand{ font-family:var(--ff-fa); font-weight:800; }

/* ---------- accessibility helpers ---------- */
.screen-reader-text{
  position:absolute !important;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
}
.skip-link{
  position:fixed; top:-100px; inset-inline-start:10px; z-index:9999;
  background:var(--ink); color:var(--paper);
  padding:12px 20px; border-radius:8px;
  transition:top .2s ease;
}
.skip-link:focus{
  position:fixed; top:10px;
  width:auto; height:auto; overflow:visible; clip:auto;
}
:focus-visible{ outline:3px solid var(--purple); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; scroll-behavior:auto !important; }
}