/* ==========================================================================
   YANGINDANISMANLIGI.COM — DESIGN TOKENS
   Aesthetic: Red Fire Safety Brand, Crisp White Base, Executive Slate Navy
   Matching 2026 Reference Mockups (Image 1, 2 & 3)
   ========================================================================== */

:root {
  /* Fenix Brand Red Spectrum (Primary Brand) */
  --yd-fire-900: #7F1D1D;
  --yd-fire-800: #991B1B;
  --yd-fire-700: #B91C1C;
  --yd-fire-600: #DC2626; /* Primary Hero Red */
  --yd-fire-500: #EF4444;
  --yd-fire-400: #F87171;
  --yd-fire-200: #FECACA;
  --yd-fire-100: #FEE2E2;
  --yd-fire-50:  #FEF2F2;

  /* Executive Deep Navy Spectrum (Secondary & Dark Containers) */
  --yd-navy-950: #060E1A;
  --yd-navy-900: #0B192C;
  --yd-navy-800: #0F2850;
  --yd-navy-700: #173B73;
  --yd-navy-600: #1E4E96;

  /* Accent Blue (Technical details) */
  --yd-blue-600: #2563EB;
  --yd-blue-500: #3B82F6;
  --yd-blue-100: #DBEAFE;
  --yd-blue-50:  #EFF6FF;

  /* WhatsApp Green */
  --yd-whatsapp:       #25D366;
  --yd-whatsapp-hover: #1EBE5D;
  --yd-whatsapp-dark:  #128C7E;
  --yd-whatsapp-light: #E7F9EE;

  /* Success Green */
  --yd-success-600: #059669;
  --yd-success-100: #D1FAE5;
  --yd-success-50:  #ECFDF5;

  /* Neutral Slate Palette (Crisp White to Slate Charcoal) */
  --yd-white:     #FFFFFF;
  --yd-slate-50:  #F8FAFC;
  --yd-slate-100: #F1F5F9;
  --yd-slate-200: #E2E8F0;
  --yd-slate-300: #CBD5E1;
  --yd-slate-400: #94A3B8;
  --yd-slate-500: #64748B;
  --yd-slate-600: #475569;
  --yd-slate-700: #334155;
  --yd-slate-800: #1E293B;
  --yd-slate-900: #0F172A;

  /* Typography */
  --yd-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --yd-font-mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;

  --yd-text-xs: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --yd-text-sm: clamp(0.82rem, 0.8rem + 0.15vw, 0.88rem);
  --yd-text-base: clamp(0.92rem, 0.88rem + 0.2vw, 1rem);
  --yd-text-lg: clamp(1.02rem, 0.95rem + 0.3vw, 1.15rem);
  --yd-text-xl: clamp(1.15rem, 1.05rem + 0.45vw, 1.35rem);
  --yd-text-2xl: clamp(1.3rem, 1.15rem + 0.7vw, 1.65rem);
  --yd-text-3xl: clamp(1.45rem, 1.25rem + 1vw, 2.1rem);
  --yd-text-4xl: clamp(1.65rem, 1.45rem + 1.6vw, 2.85rem);

  /* Elevation Shadows */
  --yd-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --yd-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.03);
  --yd-shadow-md: 0 4px 8px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --yd-shadow-lg: 0 10px 20px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.03);
  --yd-shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.09), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --yd-shadow-card: 0 12px 30px -4px rgba(15, 23, 42, 0.06), 0 4px 10px -2px rgba(15, 23, 42, 0.03);
  --yd-shadow-red: 0 10px 25px -5px rgba(220, 38, 38, 0.35);

  /* Layout Constants */
  --yd-max-width: 1220px;
  --yd-container-padding: clamp(1rem, 3vw, 2rem);
  --yd-radius-sm: 6px;
  --yd-radius-md: 10px;
  --yd-radius-lg: 16px;
  --yd-radius-xl: 20px;
  --yd-radius-2xl: 24px;
  --yd-radius-full: 9999px;

  /* Transitions */
  --yd-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --yd-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}