/* =====================================================================
   QAYD — THEME TOKENS
   Single source of truth for the brand. Change a value here and it
   updates across the whole site. Every other stylesheet references
   these custom properties — never hard-code a brand color or font.
   ===================================================================== */

:root {
  /* ---- Brand colors ---- */
  --qayd-emerald:    #0E8A6E;   /* primary — "ledger green" */
  --qayd-emerald-d:  #0A6B56;   /* darker — hover / pressed */
  --qayd-emerald-l:  #E8F5F0;   /* tint — surfaces / chips */
  --qayd-ink:        #0B1B2A;   /* near-black navy — text & dark UI */
  --qayd-ink-soft:   #48586A;   /* secondary text */
  --qayd-ink-faint:  #8494A3;   /* tertiary / captions */
  --qayd-sky:        #2BA8E0;   /* heritage accent — use sparingly */
  --qayd-sky-l:      #E7F4FB;
  --qayd-gold:       #C9A227;   /* premium / ratings */

  /* ---- Platform/channel colors (intentional, distinct CTAs) ---- */
  --qayd-android:    #3DDC84;   /* Android robot green — accent only */
  --qayd-android-d:  #00875A;   /* Android dark variant */
  --qayd-wa:         #25D366;   /* WhatsApp brand */
  --qayd-wa-d:       #128C7E;   /* WhatsApp dark */
  --qayd-call:       #1E78C8;   /* "Call" — readable blue, distinct from sky accent */
  --qayd-call-d:     #155EA3;

  /* ---- Semantic money colors ---- */
  --qayd-pos:        #0E8A6E;   /* money in */
  --qayd-neg:        #C4453B;   /* money out */

  /* ---- Surfaces ---- */
  --qayd-paper:      #F7F8F6;   /* page background */
  --qayd-card:       #FFFFFF;   /* card background */
  --qayd-line:       #E6EAE7;   /* hairline borders */
  --qayd-footer:     #06121D;   /* footer background */

  /* ---- Aliases used by components (semantic layer) ---- */
  --bg:              var(--qayd-paper);
  --surface:         var(--qayd-card);
  --border:          var(--qayd-line);
  --text:            var(--qayd-ink);
  --text-soft:       var(--qayd-ink-soft);
  --text-faint:      var(--qayd-ink-faint);
  --primary:         var(--qayd-emerald);
  --primary-dark:    var(--qayd-emerald-d);
  --primary-tint:    var(--qayd-emerald-l);
  --accent:          var(--qayd-sky);
  --accent-tint:     var(--qayd-sky-l);

  /* ---- Typography ---- */
  --font-display: 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif;
  --font-body:    'Tajawal', 'IBM Plex Sans Arabic', system-ui, sans-serif;

  /* Fluid type scale — anchored at 360px viewport so titles never crush. */
  --fs-h1:    clamp(32px, 6.2vw, 60px);
  --fs-h2:    clamp(26px, 4.6vw, 42px);
  --fs-h3:    clamp(22px, 3.2vw, 28px);
  --fs-h4:    clamp(18px, 2.4vw, 21px);
  --fs-lead:  clamp(17px, 2.1vw, 19px);
  --fs-body:  16px;
  --fs-sm:    14px;
  --fs-xs:    13px;

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

  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-body:  1.7;

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

  /* ---- Radii ---- */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  22px;
  --r-2xl: 24px;
  --r-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 3px rgba(11,27,42,.06), 0 1px 2px rgba(11,27,42,.04);
  --shadow:    0 10px 30px rgba(11,27,42,.08);
  --shadow-lg: 0 24px 60px rgba(11,27,42,.14);

  /* ---- Layout ---- */
  --container: 1200px;
  --container-narrow: 820px;
  --header-h: 68px;

  /* ---- Motion ---- */
  --ease:        cubic-bezier(.4, 0, .2, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  /* Spring kept as an alias of ease-out — bounce/overshoot reads as tacky in 2026. */
  --ease-spring: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: .15s;
  --dur:      .25s;
  --dur-slow: .6s;

  /* ---- Gradient meshes ---- */
  --mesh-emerald:
    radial-gradient(60% 50% at 18% 22%, rgba(14,138,110,.22), transparent 65%),
    radial-gradient(45% 55% at 82% 78%, rgba(43,168,224,.16), transparent 70%);
  --mesh-warm:
    radial-gradient(50% 60% at 75% 25%, rgba(201,162,39,.16), transparent 65%),
    radial-gradient(50% 50% at 20% 80%, rgba(14,138,110,.10), transparent 70%);

  /* ---- Elevation ---- */
  --shadow-glow:
    0 0 0 1px rgba(14,138,110,.06),
    0 30px 80px -28px rgba(14,138,110,.32),
    0 12px 24px -16px rgba(11,27,42,.10);
  --shadow-deep:
    0 30px 60px -25px rgba(11,27,42,.30),
    0 8px 16px -8px rgba(11,27,42,.18);
}

/* =====================================================================
   DARK THEME
   Flip via [data-theme="dark"] on <html>. Brand-dark surfaces
   (trust strip, contact, footer) stay dark in both modes — they are
   part of the brand identity, not a theme decision.
   ===================================================================== */
[data-theme="dark"] {
  --qayd-paper:    #0B1722;
  --qayd-card:     #122031;
  --qayd-line:     #1F3149;
  --qayd-footer:   #050E18;

  --bg:            var(--qayd-paper);
  --surface:       var(--qayd-card);
  --border:        var(--qayd-line);
  --text:          #F3F6F8;
  --text-soft:     #B5C2D0;
  --text-faint:    #7A8B9D;

  --primary-tint:  rgba(14,138,110,.16);
  --accent-tint:   rgba(43,168,224,.14);

  --shadow-sm:     0 1px 2px rgba(0,0,0,.30), 0 1px 1px rgba(0,0,0,.25);
  --shadow:        0 12px 32px rgba(0,0,0,.45);
  --shadow-lg:     0 30px 70px rgba(0,0,0,.55);
  --shadow-glow:
    0 0 0 1px rgba(14,138,110,.14),
    0 30px 80px -30px rgba(14,138,110,.55),
    0 12px 24px -16px rgba(0,0,0,.50);
  --shadow-deep:
    0 30px 60px -25px rgba(0,0,0,.60),
    0 8px 16px -8px rgba(0,0,0,.40);
}