/* ============================================================
   Vita D3 ODF — Design Tokens
   Single source of truth. Imported first, always.
   Derived from design-system.md (brand: Vita D3 4000 IU ODF).
   ============================================================ */

:root {
  /* ---------- Color: brand ---------- */
  --color-teal-500: #00B4D2;   /* primary: links, icons, focus */
  --color-teal-700: #007E92;   /* primary hover/active, headings on gold */
  --color-teal-100: #E3F8FB;   /* section bg, badge fill */
  --color-gold-500: #F0A724;   /* secondary: CTAs, highlights, "4000 IU" */
  --color-gold-700: #C2820F;   /* gold hover/active */
  --color-gold-100: #FDF1DD;   /* warm section bg */
  --color-sun-600:  #F07D24;   /* rare accent: sunburst detail only */

  /* ---------- Color: ink / neutrals ---------- */
  --color-ink-900:    #12232A; /* body copy, headings */
  --color-ink-700:    #3E535C; /* secondary text */
  --color-ink-500:    #6B7E86; /* placeholder / muted / helper */
  --color-silver-300: #C9D2D6; /* borders, dividers */
  --color-surface:    #FFFFFF; /* cards, panels */
  --color-bg:         #F3F6F7; /* page background */

  /* ---------- Color: semantic ---------- */
  --color-success: #2E9E5B;
  --color-warning: #D9A400;
  --color-error:   #D8453B;
  --color-info:    var(--color-teal-500);

  /* Tinted semantic surfaces (result bands + validation) */
  --color-success-100: #E4F5EC;
  --color-warning-100: #FBF3DA;
  --color-error-100:   #FBE7E5;

  /* ---------- Gradients ---------- */
  /* Signature "Sunburst Halo": teal -> gold radial glow */
  --gradient-sunburst: radial-gradient(
      circle at 50% 42%,
      #FFFFFF 0%,
      #E3F8FB 26%,
      #BDEAF2 46%,
      #F7D488 78%,
      #F0A724 100%);
  /* Primary CTA (teal) */
  --gradient-cta: linear-gradient(135deg, #00B4D2 0%, #007E92 100%);
  /* Warm diagonal sweep, echoes the on-pack teal->gold band */
  --gradient-sweep: linear-gradient(115deg, #00B4D2 0%, #4FC9DC 34%, #F5C46A 68%, #F0A724 100%);
  /* Soft page atmosphere */
  --gradient-bg: radial-gradient(1500px 1000px at 88% -18%, #E3F8FB 0%, rgba(227,248,251,0.45) 42%, rgba(227,248,251,0) 100%),
                 radial-gradient(1300px 900px at -14% 4%, #FDF1DD 0%, rgba(253,241,221,0.45) 42%, rgba(253,241,221,0) 100%);

  /* ---------- Typography ---------- */
  --font-display: "Poppins", "Noto Sans Arabic", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Noto Sans Arabic", "Segoe UI", system-ui, sans-serif;
  --font-data:    "Space Grotesk", "SFMono-Regular", ui-monospace, monospace;
  /* Arabic pairing (loaded alongside): headings + body */
  --font-display-ar: "Noto Sans Arabic", "Tajawal", var(--font-display);
  --font-body-ar:    "Noto Sans Arabic", "Tajawal", var(--font-body);

  /* Type scale: 12/14/16/18/24/32/44/60 */
  --fs-xs:  0.75rem;   /* 12 */
  --fs-sm:  0.875rem;  /* 14 */
  --fs-md:  1rem;      /* 16 */
  --fs-lg:  1.125rem;  /* 18 */
  --fs-xl:  1.5rem;    /* 24 */
  --fs-2xl: 2rem;      /* 32 */
  --fs-3xl: 2.75rem;   /* 44 */
  --fs-4xl: 3.75rem;   /* 60 */

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

  --lh-tight:   1.12;
  --lh-snug:    1.28;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

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

  /* ---------- Spacing (8px base) ---------- */
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */

  /* ---------- Radius ---------- */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   24px;
  --radius-pill: 999px;

  /* ---------- Shadow (flat/minimal — structure comes from borders) ---------- */
  --shadow-sm: none;
  --shadow-md: 0 2px 10px rgba(18,35,42,0.05);
  --shadow-lg: 0 6px 20px rgba(18,35,42,0.06);
  --shadow-glow-teal: 0 0 0 4px rgba(0,180,210,0.16);
  --shadow-glow-gold: 0 0 0 4px rgba(240,167,36,0.18);

  /* ---------- Layout ---------- */
  --container:        1200px;
  --container-narrow: 640px;
  --container-wide:   1360px;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-mid:  240ms;
  --dur-slow: 480ms;

  --z-nav: 100;
  --z-overlay: 200;
}

/* Respect reduced-motion globally */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}