/* =========================================================================
   فرم‌ساز نابغه — Design tokens
   Concept: two writing surfaces. Light = paper (a worksheet). Dark = a
   chalkboard. Both are literal surfaces you write a form or an exam on —
   the metaphor the whole visual identity is built around.
   ========================================================================= */

@font-face {
  font-family: 'Vazirmatn';
  src: local('Vazirmatn');
}

:root,
html[data-theme="light"] {
  /* -- paper surfaces (test: soft white + faint ambient green glow) -- */
  --bg: #FBFCFB;
  --bg-alt: #F5F8F6;
  --surface: #FFFFFF;
  --surface-2: #F4FAF6;
  --card: #FFFFFF;
  --header-bg: rgba(251, 252, 251, 0.86);

  --glow-1: rgba(111, 174, 139, 0.05);
  --glow-2: rgba(63, 122, 92, 0.035);

  --border: #DCEAE1;
  --border-soft: #E7F1EB;
  --rule: #D8E8DE;

  --ink: #1F281F;
  --ink-soft: #5C6A57;
  --ink-faint: #93A08A;
  --on-accent: #0E2419;

  --gold: #6FAE8B;
  --gold-deep: #3F7A5C;
  --gold-soft: #E3F3EA;
  --gold-glow: rgba(63, 122, 92, 0.22);

  --violet: #6E56CF;
  --violet-deep: #4C36A0;
  --violet-soft: #ECE7FA;

  --success: #2F9E6E;
  --success-soft: #E1F5EC;
  --danger: #D6524A;
  --danger-soft: #FBEAE8;
  --warning: #C98A1D;
  --warning-soft: #F8ECD2;
  --info: #3A7CA5;
  --info-soft: #E6F1F8;

  --shadow-sm: 0 2px 10px -4px rgba(35, 32, 15, 0.14);
  --shadow-card: 0 14px 34px -18px rgba(35, 32, 15, 0.28);
  --shadow-pop: 0 30px 70px -24px rgba(35, 32, 15, 0.34);

  --paper-lines: repeating-linear-gradient(
    to bottom, transparent 0, transparent 27px, var(--rule) 28px
  );

  color-scheme: light;
}

html[data-theme="dark"] {
  /* -- chalkboard surfaces -- */
  --bg: #141F1A;
  --bg-alt: #101815;
  --surface: #1D2E27;
  --surface-2: #223830;
  --card: #1D2E27;
  --header-bg: rgba(20, 31, 26, 0.86);

  --border: #2C4038;
  --border-soft: #263A32;
  --rule: #2A3F36;

  --ink: #F1EEE3;
  --ink-soft: #ACBBAE;
  --ink-faint: #6C8177;
  --on-accent: #1B1204;

  --gold: #F0C25C;
  --gold-deep: #D9A62E;
  --gold-soft: rgba(240, 194, 92, 0.14);
  --gold-glow: rgba(240, 194, 92, 0.30);

  --violet: #A292F2;
  --violet-deep: #8471E8;
  --violet-soft: rgba(162, 146, 242, 0.14);

  --success: #55C793;
  --success-soft: rgba(85, 199, 147, 0.14);
  --danger: #F0796F;
  --danger-soft: rgba(240, 121, 111, 0.14);
  --warning: #EFC15C;
  --warning-soft: rgba(239, 193, 92, 0.14);
  --info: #6FB2DC;
  --info-soft: rgba(111, 178, 220, 0.14);

  --shadow-sm: 0 2px 10px -4px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 14px 34px -18px rgba(0, 0, 0, 0.55);
  --shadow-pop: 0 30px 70px -24px rgba(0, 0, 0, 0.65);

  --paper-lines: radial-gradient(circle at 20% 30%, rgba(241,238,227,0.05) 0, transparent 45%),
                 radial-gradient(circle at 75% 65%, rgba(241,238,227,0.04) 0, transparent 50%);

  color-scheme: dark;
}

/* -- shared tokens (identical in both themes) --------------------------- */
:root {
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  --font-fa: 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;

  --nav-h: 68px;
  --sidebar-w: 264px;
  --bottom-nav-h: 64px;

  --ease-pop: cubic-bezier(.34, 1.35, .64, 1);
  --ease-std: cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-fa);
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s var(--ease-std), color .25s var(--ease-std);
  min-height: 100vh;
  position: relative;
}

/* -- ambient tint: white stays the base, green is only a faint whisper - */
body::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px circle at 10% 8%,  var(--glow-1), transparent 100%),
    radial-gradient(1000px circle at 94% 46%, var(--glow-2), transparent 100%),
    radial-gradient(1100px circle at 14% 92%, var(--glow-1), transparent 100%);
  opacity: 1;
  transition: opacity .25s var(--ease-std);
}

html[data-theme="dark"] body::before {
  background:
    radial-gradient(1100px circle at 10% 8%,  rgba(85, 199, 147, 0.025), transparent 100%),
    radial-gradient(1000px circle at 94% 46%, rgba(85, 199, 147, 0.02),  transparent 100%),
    radial-gradient(1100px circle at 14% 92%, rgba(85, 199, 147, 0.025), transparent 100%);
}

body.no-scroll { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-fa);
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}

p { margin: 0 0 1em; color: var(--ink-soft); }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

button { font-family: inherit; cursor: pointer; }

input, textarea, select, button {
  font-family: var(--font-fa);
  font-size: 1rem;
  color: var(--ink);
}

::selection { background: var(--gold-glow); color: var(--ink); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 6px;
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.mono { font-family: var(--font-mono); direction: ltr; unicode-bidi: plaintext; }

.text-soft { color: var(--ink-soft); }
.text-faint { color: var(--ink-faint); }
.text-gold { color: var(--gold-deep); }
html[data-theme="dark"] .text-gold { color: var(--gold); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-center { text-align: center; }

.hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* -- signature: hand-drawn check, used sparingly on success moments ----- */
.chalk-check { width: 64px; height: 64px; }
.chalk-check circle {
  fill: none; stroke: var(--success); stroke-width: 3;
  stroke-dasharray: 166; stroke-dashoffset: 166;
  animation: chalk-circle .5s var(--ease-std) forwards;
}
.chalk-check path {
  fill: none; stroke: var(--success); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 48; stroke-dashoffset: 48;
  animation: chalk-tick .35s var(--ease-std) .45s forwards;
}
@keyframes chalk-circle { to { stroke-dashoffset: 0; } }
@keyframes chalk-tick { to { stroke-dashoffset: 0; } }

/* -- scroll reveal --------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease-std), transform .6s var(--ease-std); }
.reveal.in { opacity: 1; transform: translateY(0); }