/*
 * Azr3 Design Tokens — single source of truth for color, type, spacing,
 * motion. Mirrors `Azr3App/Core/DesignSystem/Azr3Color.swift` so web
 * and native read as one product.
 */
:root {
  /* ---- Neutrals / surfaces -------------------------------------- */
  --azr3-bg:            #F6F0E1;
  --azr3-bg-warm:       #FBF6EA;
  --azr3-surface:       #FFFFFF;
  --azr3-sand:          #F0E5CC;
  --azr3-sand-deep:     #DCCBA2;
  --azr3-mist-chip:     #ECF1E2;

  /* ---- Ink scale (text) ----------------------------------------- */
  --azr3-ink:           #1F1B14;
  --azr3-ink2:          #4A4538;
  --azr3-ink3:          #837C6C;
  --azr3-ink4:          #B5AD9A;

  /* ---- Regional palettes ---------------------------------------- */
  --azr3-najd:          #B27A4A;
  --azr3-najd-deep:     #5C3A22;
  --azr3-asir:          #2F5E3A;
  --azr3-asir-deep:     #1F4128;
  --azr3-hijaz:         #4A7A8C;
  --azr3-hijaz-deep:    #2E5667;
  --azr3-eastern:       #3F5A3D;
  --azr3-eastern-deep:  #1F2C1F;
  --azr3-alula:         #B26A4A;
  --azr3-alula-deep:    #7D3F26;

  /* ---- Cultural / accent ---------------------------------------- */
  --azr3-qatt-red:      #C0432D;
  --azr3-qatt-yellow:   #E2B43E;
  --azr3-qatt-blue:     #3F6A8C;
  --azr3-qatt-green:    #4A7A4A;
  --azr3-palm:          #3F5A3D;
  --azr3-palm-soft:     #6B8A56;
  --azr3-palm-deep:     #2A4029;
  --azr3-terracotta:    #B87A4A;

  /* ---- Brand bloom (the app-icon flower) ------------------------ */
  --azr3-bloom:         #44C4BC;
  --azr3-bloom-deep:    #2A938C;
  --azr3-bloom-ink:     #1F6E68;
  --azr3-bloom-soft:    #E3F6F4;

  /* ---- Semantic mappings (default region = asir) ---------------- */
  --color-bg:           var(--azr3-bg);
  --color-bg-soft:      var(--azr3-bg-warm);
  --color-surface:      var(--azr3-surface);
  --color-sand:         var(--azr3-sand);
  --color-sand-deep:    var(--azr3-sand-deep);

  --color-text:         var(--azr3-ink);
  --color-text-2:       var(--azr3-ink2);
  --color-text-3:       var(--azr3-ink3);
  --color-text-4:       var(--azr3-ink4);

  --color-accent:       var(--azr3-bloom-deep);
  --color-accent-deep:  var(--azr3-bloom-ink);
  --color-accent-soft:  var(--azr3-bloom-soft);
  --color-accent-2:     var(--azr3-gold, #B98E4A);
  --color-bloom:        var(--azr3-bloom);

  /* ---- Spacing scale -------------------------------------------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --space-32: 128px;

  /* ---- Radii ---------------------------------------------------- */
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px;
  --radius-xl: 28px; --radius-2xl: 36px; --radius-full: 999px;

  /* ---- Shadows -------------------------------------------------- */
  --shadow-subtle: 0 1px 2px rgba(31, 27, 20, 0.04), 0 4px 12px rgba(31, 27, 20, 0.06);
  --shadow-soft:   0 2px 8px rgba(31, 27, 20, 0.06), 0 12px 32px rgba(31, 27, 20, 0.10);
  --shadow-glow:   0 0 0 1px rgba(42, 147, 140, 0.12), 0 8px 32px rgba(42, 147, 140, 0.20);
  --shadow-deep:   0 30px 60px -20px rgba(31, 27, 20, 0.35), 0 18px 36px -18px rgba(31, 27, 20, 0.25);

  /* ---- Motion --------------------------------------------------- */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-snap: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 180ms;
  --duration-base: 280ms;
  --duration-slow: 640ms;

  /* ---- Type ----------------------------------------------------- */
  --font-serif: "Thmanyah Serif", "Amiri", Georgia, "Times New Roman", serif;
  --font-sans:  "Thmanyah Sans", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-64: 4rem;

  /* Fluid scale used by hero/section headings */
  --fs-hero:     clamp(2.5rem, 2rem + 4vw, 4.5rem);
  --fs-section:  clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);

  /* ---- Layout --------------------------------------------------- */
  --container:        80rem;
  --container-narrow: 64rem;
  --section-pad-y:    clamp(4rem, 8vw, 7rem);
  --section-pad-x:    clamp(1rem, 4vw, 2.5rem);
  --header-h:         64px;
}

@media (min-width: 720px) {
  :root { --header-h: 72px; }
}

/* Region-themed accents — set via data-region on <body>. */
:root[data-region="najd"] {
  --color-accent:      var(--azr3-najd);
  --color-accent-deep: var(--azr3-najd-deep);
  --color-accent-soft: #F4E8D8;
  --color-accent-2:    var(--azr3-asir);
}
:root[data-region="asir"] {
  --color-accent:      var(--azr3-asir);
  --color-accent-deep: var(--azr3-asir-deep);
  --color-accent-soft: var(--azr3-mist-chip);
  --color-accent-2:    var(--azr3-qatt-red);
}
:root[data-region="hijaz"] {
  --color-accent:      var(--azr3-hijaz);
  --color-accent-deep: var(--azr3-hijaz-deep);
  --color-accent-soft: #DEEAEE;
  --color-accent-2:    #B6463A;
}
:root[data-region="eastern"] {
  --color-accent:      var(--azr3-eastern);
  --color-accent-deep: var(--azr3-eastern-deep);
  --color-accent-soft: #E6E0CB;
  --color-accent-2:    #B98E4A;
}
:root[data-region="alula"] {
  --color-accent:      var(--azr3-alula);
  --color-accent-deep: var(--azr3-alula-deep);
  --color-accent-soft: #F4D9B4;
  --color-accent-2:    #9B6FA0;
}

/* Respect motion preference at the root. JS uses html[data-motion]. */
@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;
  }
}