/* ==========================================================================
   variables.css — Global Design Tokens (Single Source of Truth)
   --------------------------------------------------------------------------
   Every stylistic decision (color, type scale, spacing, shadow, motion)
   derives from these custom properties. Editing a value here cascades
   site-wide, guaranteeing zero visual drift between pages and sections.
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     1. BRAND COLOR PALETTE (per Design Specification §A)
     ---------------------------------------------------------------------- */
  --color-primary: #1e2053;        /* Deep Night Blue — Trust */
  --color-primary-700: #15163b;    /* Darker primary for deep sections */
  --color-primary-300: #4a4d8a;    /* Lifted primary for subtle accents */

  --color-secondary: #e6d8ea;      /* Soft Lavender — Calm */
  --color-secondary-200: #f1eaf4;  /* Lavender wash (lighter) */
  --color-secondary-400: #d4c0db;  /* Lavender shade (deeper) */

  --color-accent: #f28482;         /* Subtle Coral — CTA */
  --color-accent-600: #e26a68;     /* Coral pressed/hover */
  --color-accent-200: #fbdedd;     /* Coral tint (soft fills) */

  /* Text */
  --color-heading: #1a1a2e;        /* Headings */
  --color-body: #4a4e69;           /* Body copy */
  --color-muted: #767a93;          /* Muted / supporting text */
  --color-on-dark: #f4f3f8;        /* Text on deep-blue surfaces */
  --color-on-dark-muted: #b9bad5;  /* Muted text on dark surfaces */

  /* Surfaces */
  --color-bg: #f8f7fa;             /* Base off-white / gray-purple tint */
  --color-surface: #ffffff;        /* Cards & raised surfaces */
  --color-border: rgba(30, 32, 83, 0.10);
  --color-border-strong: rgba(30, 32, 83, 0.16);

  /* ----------------------------------------------------------------------
     2. SOOTHING BACKGROUND GRADIENTS (per §4 rule 7 — never flat/uniform)
     ---------------------------------------------------------------------- */
  --grad-hero:
    radial-gradient(120% 120% at 85% 0%, #f1eaf4 0%, rgba(241, 234, 244, 0) 55%),
    radial-gradient(90% 90% at 0% 100%, #efeaf6 0%, rgba(239, 234, 246, 0) 50%),
    linear-gradient(180deg, #fbfaff 0%, #f8f7fa 100%);
  --grad-soft-lavender:
    linear-gradient(180deg, #f8f7fa 0%, #f1ecf6 100%);
  --grad-deep:
    radial-gradient(110% 90% at 80% 10%, #2a2d6e 0%, rgba(42, 45, 110, 0) 60%),
    linear-gradient(160deg, #1e2053 0%, #15163b 100%);
  --grad-accent-glow:
    radial-gradient(60% 60% at 50% 0%, rgba(242, 132, 130, 0.18) 0%, rgba(242, 132, 130, 0) 70%);

  /* Glassmorphism surface (frosted cards / nav) */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-blur: 16px;

  /* ----------------------------------------------------------------------
     3. TYPOGRAPHY (per §B — Cairo, fluid scaling, no oversized type)
     ---------------------------------------------------------------------- */
  --font-primary: "Cairo", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Fluid type scale — clamp(min, preferred, max). Mobile-first, never clipped. */
  --fs-display: clamp(2rem, 1.4rem + 3vw, 3rem);     /* Hero headline */
  --fs-h1: clamp(1.9rem, 1.45rem + 2.2vw, 2.5rem);   /* H1 base 2.5rem */
  --fs-h2: clamp(1.6rem, 1.3rem + 1.5vw, 2rem);      /* H2 base 2rem   */
  --fs-h3: clamp(1.3rem, 1.15rem + 0.7vw, 1.5rem);   /* H3 base 1.5rem */
  --fs-h4: clamp(1.1rem, 1.02rem + 0.4vw, 1.25rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);  /* Intro paragraphs */
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  --fs-small: 0.9rem;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 1.3;   /* Headings */
  --lh-snug: 1.4;
  --lh-body: 1.6;     /* Body text (per §B) */

  /* ----------------------------------------------------------------------
     4. LAYOUT & SPACING (per §C)
     ---------------------------------------------------------------------- */
  --container-max: 1300px;       /* Site-wide container (per §C) */
  --container-narrow: 820px;     /* Readable prose width */
  --gutter: clamp(1.25rem, 0.8rem + 2.2vw, 2.5rem);

  /* Fluid vertical rhythm — generous, calming section spacing */
  --space-section: clamp(4.5rem, 3rem + 7vw, 8rem);
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;

  /* ----------------------------------------------------------------------
     5. RADII, SHADOWS, BORDERS (per §C)
     ---------------------------------------------------------------------- */
  --radius-sm: 8px;
  --radius: 12px;                /* Base radius (per §C) */
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-soft: 0 10px 30px rgba(30, 32, 83, 0.08);   /* Base (per §C) */
  --shadow-raised: 0 18px 48px rgba(30, 32, 83, 0.12);
  --shadow-deep: 0 28px 70px rgba(30, 32, 83, 0.18);
  --shadow-accent: 0 14px 34px rgba(242, 132, 130, 0.32);

  /* ----------------------------------------------------------------------
     6. MOTION (per §D — slow, deliberate, calming; power2.out ≈ this curve)
     ---------------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.25s;
  --dur: 0.45s;
  --dur-slow: 0.7s;

  /* ----------------------------------------------------------------------
     7. Z-INDEX SCALE
     ---------------------------------------------------------------------- */
  --z-header: 100;
  --z-overlay: 200;
  --z-menu: 210;
}