/* ==========================================================================
   Aayam Technovations — Design Tokens
   Single source of truth for the visual system. Change the palette here
   and it changes everywhere. No component rules belong in this file.

   Palette is derived from the logo (public/logo/logo.png):
     red  #EA0000   contrast on white 4.67:1
     ink  #041115   contrast on white 19.16:1
   Red is an ACCENT, never body-text colour. For red text at body size use
   --ay-red-600 (#C40000, 6.27:1). White on red is 4.67:1 — fine for buttons.
   ========================================================================== */

:root {
  /* --- brand ------------------------------------------------------------ */
  --ay-red: #EA0000;
  --ay-red-600: #C40000;          /* accessible red for text on white */
  --ay-red-700: #9E0000;
  --ay-red-100: #FDE7E7;
  --ay-red-50:  #FFF5F5;

  --ay-ink: #041115;              /* logo black */
  --ay-ink-800: #0B1E24;
  --ay-ink-700: #14313A;
  --ay-slate: #5A6B71;
  --ay-slate-400: #8A979C;

  --ay-white: #ffffff;
  --ay-surface: #F6F8F9;
  --ay-surface-2: #EDF1F3;
  --ay-line: #E3E8EA;

  /* WhatsApp brand green — used only for the WhatsApp affordances, where the
     colour carries recognition value that our own palette cannot. */
  --ay-wa: #25D366;
  --ay-wa-600: #1EB855;

  /* A second, distinct green for savings/discount badges -- deliberately not
     --ay-wa, which is reserved for WhatsApp affordances only. */
  --ay-success: #1E8A3C;
  --ay-success-50: #EDF9F0;

  /* --- semantic (components reference ONLY these) ----------------------- */
  --ay-bg: var(--ay-white);
  --ay-bg-alt: var(--ay-surface);
  --ay-bg-invert: var(--ay-ink);
  --ay-text: var(--ay-ink);
  --ay-text-muted: var(--ay-slate);
  --ay-text-on-invert: #E9EEF0;
  --ay-text-on-invert-muted: #9FB0B6;
  --ay-accent: var(--ay-red);
  --ay-accent-text: var(--ay-red-600);
  --ay-border: var(--ay-line);
  --ay-border-invert: rgba(255, 255, 255, .14);
  --ay-focus: 0 0 0 3px rgba(234, 0, 0, .35);

  /* --- spacing (4px base) ---------------------------------------------- */
  --ay-1: 4px;   --ay-2: 8px;   --ay-3: 12px;  --ay-4: 16px;  --ay-5: 24px;
  --ay-6: 32px;  --ay-7: 48px;  --ay-8: 64px;  --ay-9: 96px;  --ay-10: 128px;

  --ay-section-y: clamp(56px, 7vw, 112px);
  --ay-container: 1240px;
  --ay-container-wide: 1440px;
  --ay-gutter: clamp(16px, 4vw, 32px);

  /* --- typography ------------------------------------------------------- */
  --ay-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ay-font-display: "Barlow Condensed", "Inter", system-ui, sans-serif;

  --ay-fs-xs: .8125rem;
  --ay-fs-sm: .875rem;
  --ay-fs-base: 1rem;
  --ay-fs-lg: 1.0625rem;
  --ay-fs-xl: clamp(1.25rem, 1.6vw, 1.5rem);
  --ay-fs-2xl: clamp(1.5rem, 2.4vw, 2rem);
  --ay-fs-3xl: clamp(1.9rem, 3.6vw, 2.75rem);
  --ay-fs-4xl: clamp(2.2rem, 4.4vw, 3.4rem);
  --ay-fs-hero: clamp(2.4rem, 5.4vw, 4.4rem);

  --ay-lh-tight: 1.08;
  --ay-lh-snug: 1.28;
  --ay-lh: 1.65;
  --ay-tracking-eyebrow: .16em;
  --ay-tracking-tight: -.02em;

  --ay-fw-normal: 400;
  --ay-fw-medium: 500;
  --ay-fw-semi: 600;
  --ay-fw-bold: 700;

  /* --- radii ------------------------------------------------------------ */
  --ay-r-sm: 6px;
  --ay-r: 12px;
  --ay-r-lg: 20px;
  --ay-r-pill: 999px;

  /* --- elevation -------------------------------------------------------- */
  --ay-shadow-1: 0 1px 2px rgba(4, 17, 21, .06), 0 2px 8px rgba(4, 17, 21, .05);
  --ay-shadow-2: 0 8px 24px rgba(4, 17, 21, .10);
  --ay-shadow-3: 0 20px 48px rgba(4, 17, 21, .16);
  --ay-shadow-red: 0 10px 28px rgba(234, 0, 0, .28);

  /* --- motion ----------------------------------------------------------- */
  --ay-ease: cubic-bezier(.22, .61, .36, 1);
  --ay-ease-out: cubic-bezier(.16, 1, .3, 1);
  --ay-dur-1: 160ms;
  --ay-dur-2: 280ms;
  --ay-dur-3: 520ms;
  --ay-dur-slide: 900ms;

  /* --- layout ----------------------------------------------------------- */
  --ay-header-h: 84px;
  --ay-header-h-stuck: 68px;
  --ay-z-header: 900;
  --ay-z-drawer: 1000;
  --ay-z-modal: 1100;
}

/* Users who ask for less motion get none of it. Durations collapse to zero
   so transitions still "complete" and no JS state machine gets stuck. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ay-dur-1: 0ms;
    --ay-dur-2: 0ms;
    --ay-dur-3: 0ms;
    --ay-dur-slide: 0ms;
  }
}