:root {
  --color-primary: #0F6B5C;
  --color-accent: #D9A441;
  --color-danger: #B03A2E;
  --color-surface: #FAF9F6;
  --color-surface-2: #F5F7F6;
  --color-ink: #1C2A27;
  --color-ink-muted: rgba(28,42,39,0.62);
  --font-sans: "Vazirmatn", system-ui, sans-serif;
  --font-display: "Estedad", "Vazirmatn", system-ui, sans-serif;
}

:root {
  --primary: #0F6B5C;
  --accent: #D9A441;
  --surface: #FAF9F6;
  --ink: #1C2A27;
  --color-primary: #0F6B5C;
  --color-accent: #D9A441;
  --color-danger: #B03A2E;
  --color-text: #1C2A27;
  --color-surface: #FAF9F6;
  --color-surface-2: #F5F7F6;
  --surfaceMuted: #F5F7F6;
  --inkMuted: rgba(28,42,39,0.62);
  --muted: rgba(28,42,39,0.42);
  --border: rgba(15,107,92,0.16);
  --success: #0F6B5C;
  --error: #B03A2E;
  --shadow-md: 0 3px 8px rgba(28,42,39,0.08);
  --shadow-lg: 0 8px 20px rgba(28,42,39,0.10);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--surface);
  line-height: 1.85;
}
#root { min-height: 100vh; }
::selection { background: color-mix(in oklch, var(--accent) 35%, transparent); }
input:focus { outline: none; }
button, a { -webkit-tap-highlight-color: transparent; }

/* صفحهٔ ورود: زمینهٔ سبز بسیار روشن و کارت‌های رنگ‌گرفته، بدون تغییر هویت رسمی */
section.min-h-screen {
  background: color-mix(in oklch, var(--primary) 9%, var(--surface)) !important;
}
section.min-h-screen header {
  border-color: color-mix(in oklch, var(--primary) 18%, transparent) !important;
}
section.min-h-screen [role="button"] {
  background: color-mix(in oklch, var(--primary) 4%, var(--surface)) !important;
  border-color: color-mix(in oklch, var(--primary) 22%, transparent) !important;
}
section.min-h-screen [role="button"]:nth-child(2) {
  background: color-mix(in oklch, var(--accent) 6%, var(--surface)) !important;
}
section.min-h-screen [role="button"]:nth-child(3) {
  background: color-mix(in oklch, var(--primary) 7%, var(--surface)) !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* SAZITO_PLATFORM_CONTAINER_FIX_SCRUM_4531 */
/* No author .container rule found; Tailwind's built-in .container
   utility never had a phone gutter in EITHER preview or a real build
   (width:100% + breakpoint max-width, no padding/margin, ever) — see
   platformContainerFix.ts for the full mechanism, verified both ways.
   Scoped to @layer components (not unlayered) so a REAL utility class the
   author DID apply — e.g. class="container px-8" — still wins: Tailwind's
   own @layer utilities (publish) and its unlayered runtime injection
   (preview) both outrank @layer components; this default only applies
   when nothing else sets padding/margin at all. */
@layer components {
  .container {
    margin-inline: auto;
    padding-inline: 1rem;
  }
  @media (min-width: 640px) {
    .container {
      padding-inline: 1.5rem;
    }
  }
}