/* ============================================================
   Barakat v2.0 — Design Tokens (2026 modern stack)
   Locked from the Flutter app brand identity
   ============================================================ */

:root {
  /* ----- Brand Colors (clean green + white from brand mock) ----- */
  --color-primary: #16A34A;
  --color-primary-dark: #15803D;
  --color-primary-light: #22C55E;
  --color-primary-bright: #22C55E;
  --color-primary-tint: #DCFCE7;
  --color-secondary: #111827;
  --color-accent: #F59E0B;
  --color-accent-light: #FCD34D;
  --color-success: #22C55E;
  --color-danger: #EF4444;
  --color-danger-dark: #DC2626;
  --color-danger-tint: #FEF2F2;
  --color-danger-text: #991B1B;
  --color-warning: #F59E0B;
  --color-info: #3B82F6;

  /* ----- Surfaces ----- */
  --color-bg: #FFFFFF;
  --color-bg-elevated: #FFFFFF;
  --color-bg-alt: #F9FAFB;
  --color-bg-dark: #0E1512;
  --color-bg-tint: #ECFDF5;
  --color-bg-soft: #F3F4F6;

  /* ----- Text ----- */
  --color-text-primary: #111827;
  --color-text: #111827;
  --color-text-secondary: #6B7280;
  --color-text-muted: #9CA3AF;
  --color-text-inverse: #FFFFFF;

  /* ----- Borders ----- */
  --color-border: #E5E7EB;
  --color-border-subtle: #F3F4F6;
  --color-border-strong: #D1D5DB;

  /* ----- Gradients: keep green family, drop navy/purple hype ----- */
  --gradient-hero: linear-gradient(135deg, #16A34A 0%, #22C55E 100%);
  --gradient-mesh:
    radial-gradient(at 18% 12%, rgba(34, 197, 94, 0.10) 0px, transparent 48%),
    radial-gradient(at 88% 0%, rgba(22, 163, 74, 0.08) 0px, transparent 45%),
    radial-gradient(at 50% 100%, rgba(220, 252, 231, 0.55) 0px, transparent 55%),
    #FFFFFF;
  --gradient-text: linear-gradient(135deg, #15803D 0%, #16A34A 55%, #22C55E 100%);
  --gradient-emerald: linear-gradient(180deg, #22C55E 0%, #16A34A 100%);
  --gradient-amber: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  --gradient-purple: linear-gradient(135deg, #16A34A 0%, #15803D 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.45) 100%);
  --gradient-card-hover: linear-gradient(135deg, rgba(22, 163, 74, 0.035) 0%, rgba(34, 197, 94, 0.05) 100%);

  /* ----- Spacing (8px grid) ----- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ----- Layout ----- */
  --container-max: 1200px;
  --container-padding: 1.5rem;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ----- Shadows: soft, calm ----- */
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow: 0 2px 8px rgba(17, 24, 39, 0.04), 0 1px 2px rgba(17, 24, 39, 0.03);
  --shadow-md: 0 8px 24px rgba(17, 24, 39, 0.06), 0 2px 4px rgba(17, 24, 39, 0.04);
  --shadow-lg: 0 16px 40px rgba(17, 24, 39, 0.07), 0 4px 8px rgba(17, 24, 39, 0.04);
  --shadow-xl: 0 24px 64px rgba(17, 24, 39, 0.08), 0 8px 16px rgba(17, 24, 39, 0.05);
  --shadow-emerald: 0 8px 22px rgba(22, 163, 74, 0.22);
  --shadow-emerald-glow: 0 0 0 4px rgba(34, 197, 94, 0.14);
  --shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.65);

  /* ----- Typography ----- */
  --font-sans: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text-hero: clamp(1.75rem, 4.5vw, 3.25rem);
  --text-h1: clamp(1.75rem, 4vw, 2.75rem);
  --text-h2: clamp(1.75rem, 4.5vw, 3rem);
  --text-h3: clamp(1.25rem, 3vw, 1.75rem);
  --text-h4: clamp(1.0625rem, 2vw, 1.25rem);
  --text-body: 1.0625rem;
  --text-body-lg: 1.125rem;
  --text-small: 0.875rem;
  --text-xs: 0.75rem;

  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* ----- Motion ----- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;

  /* ----- Z-index ----- */
  --z-base: 1;
  --z-nav: 50;
  --z-modal: 100;
  --z-toast: 200;

  /* ----- Glassmorphism ----- */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.4);
  --glass-blur: blur(20px) saturate(180%);
}