/* ==========================================================================
   variables.css — Design tokens (Instagram-vibrant theme)
   Change values here, the whole site follows.
   ========================================================================== */

:root {
  /* --- Instagram-inspired brand palette ------------------------------------ */
  --ig-blue:    #4C5FD5;
  --ig-purple:  #8A3AB9;
  --ig-magenta: #C13584;
  --ig-pink:    #E1306C;
  --ig-red:     #F4405F;
  --ig-orange:  #F56040;
  --ig-amber:   #FCAF45;
  --ig-yellow:  #FFDC80;

  /* Signature gradient (buttons, rings, highlights) */
  --grad-ig: linear-gradient(100deg, #4C5FD5 0%, #8A3AB9 25%, #C13584 45%, #E1306C 62%, #F56040 82%, #FCAF45 100%);
  --grad-ig-45: linear-gradient(45deg, #FCAF45, #F56040, #E1306C, #C13584, #8A3AB9, #4C5FD5);
  --grad-warm: linear-gradient(120deg, #F56040, #E1306C);
  --grad-cool: linear-gradient(120deg, #8A3AB9, #4C5FD5);

  /* Soft tints for section backgrounds (happy but readable) */
  --tint-pink:   #FDEDF3;
  --tint-purple: #F1ECFB;
  --tint-orange: #FFF1EA;
  --tint-yellow: #FFF8E9;

  /* --- Neutrals ------------------------------------------------------------ */
  --color-white:      #FFFFFF;
  --color-bg:         #FFFDFB;
  --color-off-white:  #FBF7F4;
  --color-line:       #EFE9E6;
  --color-charcoal:   #211E24; /* slightly warm, softer than pure black */
  --color-charcoal-70:#565060;
  --color-charcoal-45:#8B8593;

  --color-success:      #2FA36B;
  --color-success-soft: #E4F5EC;
  --color-danger:       #E1306C;

  /* Semantic aliases */
  --bg:          var(--color-bg);
  --bg-soft:     var(--color-off-white);
  --text:        var(--color-charcoal);
  --text-muted:  var(--color-charcoal-70);
  --text-subtle: var(--color-charcoal-45);
  --line:        var(--color-line);
  --accent:      var(--ig-pink);
  --accent-dark: var(--ig-magenta);

  /* --- Typography ---------------------------------------------------------- */
  --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-arabic: "Cairo", "Segoe UI", Tahoma, sans-serif;

  --fs-caption: 0.8125rem;
  --fs-small:   0.9375rem;
  --fs-body:    1.0625rem;
  --fs-lead:    clamp(1.1rem, 1rem + 0.7vw, 1.35rem);
  --fs-h3:      clamp(1.25rem, 1.05rem + 1vw, 1.55rem);
  --fs-h2:      clamp(1.7rem, 1.25rem + 2.2vw, 2.6rem);
  --fs-h1:      clamp(1.9rem, 1.4rem + 3vw, 3rem);
  --fs-stat:    clamp(1.5rem, 1.1rem + 2vw, 2.25rem);

  --lh-tight: 1.14;
  --lh-snug:  1.3;
  --lh-normal:1.6;

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

  --tracking-tight: -0.02em;
  --tracking-wide:  0.06em;

  /* --- Spacing (8pt) ------------------------------------------------------- */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem;
  --section-pad: clamp(3rem, 1.6rem + 6vw, 5.5rem);

  /* --- Layout -------------------------------------------------------------- */
  --container: 1080px;
  --container-narrow: 760px;
  --header-height: 60px;

  /* --- Radius (rounder, friendlier) ---------------------------------------- */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* --- Shadows ------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(33,30,36,.05), 0 2px 6px rgba(33,30,36,.06);
  --shadow-md: 0 6px 16px rgba(33,30,36,.07), 0 14px 34px rgba(33,30,36,.08);
  --shadow-lg: 0 14px 36px rgba(33,30,36,.10), 0 34px 70px rgba(33,30,36,.10);
  --shadow-pink: 0 10px 26px rgba(225,48,108,.32);
  --shadow-glow: 0 8px 30px rgba(138,58,185,.28);

  /* --- Motion -------------------------------------------------------------- */
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --speed-fast:160ms; --speed:320ms; --speed-slow:620ms;

  --z-header:100; --z-wizard:1000;
}

@media (prefers-reduced-motion: reduce) {
  :root { --speed-fast:0ms; --speed:0ms; --speed-slow:0ms; }
}