/* ============================================================================
   سَندو — Shared Theme (theme.css)
   Design tokens, self-hosted fonts, and component primitives reused across
   every page of sanado.ir. Pairs with /theme.js (Tailwind config + dark mode).
   ============================================================================ */

/* ---------------------------------------------------------------------- */
/* Vazirmatn — self-hosted, split by unicode-range for smaller payloads    */
/* ---------------------------------------------------------------------- */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/fonts/Vazirmatn-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/fonts/Vazirmatn-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/fonts/Vazirmatn-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------------- */
/* Color tokens — RGB triplets so Tailwind's <alpha-value> works           */
/* ---------------------------------------------------------------------- */
:root {
  --surface: 255 255 255;     /* card / white */
  --surface-2: 248 250 252;   /* page background */
  --surface-3: 241 245 249;   /* subtle fill */
  --ink: 15 23 42;
  --ink-muted: 100 116 139;
  --ink-subtle: 148 163 184;
  --border: 226 232 240;
}
.dark {
  --surface: 30 41 59;
  --surface-2: 15 23 42;
  --surface-3: 51 65 85;
  --ink: 241 245 249;
  --ink-muted: 148 163 184;
  --ink-subtle: 100 116 139;
  --border: 51 65 85;
}

html {
  font-family: 'Vazirmatn', 'Inter', system-ui, sans-serif;
}
body {
  background-color: rgb(var(--surface-2));
  color: rgb(var(--ink));
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  transition: background-color .2s ease, color .2s ease;
}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                  */
/* ---------------------------------------------------------------------- */
.btn-primary, .btn-secondary, .btn-outline, .btn-white, .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-weight: 700;
  border-radius: 12px;
  transition: all .2s ease;
  padding: .75rem 1.5rem;
  font-size: .875rem;
  line-height: 1;
  cursor: pointer;
  border: 2px solid transparent;
  text-decoration: none;
}

.btn-primary {
  color: #fff;
  background-image: linear-gradient(to left, #4f46e5, #6366f1);
  box-shadow: 0 8px 24px rgba(99,102,241,.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(99,102,241,.45); }

.btn-secondary {
  background-color: rgb(var(--surface));
  color: #4f46e5;
  border-color: rgb(var(--border));
}
.btn-secondary:hover { border-color: #818cf8; }
.dark .btn-secondary { color: #a5b4fc; }

.btn-outline {
  background-color: transparent;
  color: #4f46e5;
  border-color: #6366f1;
}
.btn-outline:hover { background-color: #eef2ff; }
.dark .btn-outline { color: #a5b4fc; }
.dark .btn-outline:hover { background-color: rgba(49,46,129,.3); }

.btn-white {
  background-color: #fff;
  color: #4f46e5;
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
}
.btn-white:hover { transform: translateY(-2px); }

.btn-ghost {
  background-color: transparent;
  color: rgb(var(--ink-muted));
}
.btn-ghost:hover { background-color: rgb(var(--surface-3)); }

/* ---------------------------------------------------------------------- */
/* Surfaces & form primitives                                              */
/* ---------------------------------------------------------------------- */
.card {
  background-color: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .75rem;
  font-weight: 700;
  padding: .25rem .625rem;
  border-radius: 999px;
}

.input {
  display: block;
  width: 100%;
  background-color: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
  border-radius: 12px;
  padding: .625rem 1rem;
  font-size: .875rem;
  color: rgb(var(--ink));
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder { color: rgb(var(--ink-subtle)); }
.input:focus { border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99,102,241,.2); }

.label {
  display: block;
  margin-bottom: .375rem;
  font-size: .875rem;
  font-weight: 600;
  color: rgb(var(--ink));
}

.alert {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid;
  font-size: .875rem;
}