/* =================================================================
   GUARIP DESIGN TOKENS
   Single source of truth. Reused by every future section.
   ================================================================= */

:root {
  /* ─── Color ────────────────────────────────────────────────── */
  --g-ivory:           #F5EEE0;
  --g-sand:            #ECE3CC;
  --g-paper:           #FBF6EC;
  --g-deep:            #2C4F46;
  --g-deep-soft:       #3D5C53;
  --g-deep-warm:       #3F3327;
  --g-deep-warm-soft:  #4A3E32;
  --g-rose:            #C58B7E;
  --g-terracotta:      #A65A4D;
  --g-olive:           #A2A084;
  --g-brass:           #B89860;
  --g-brass-soft:      rgba(184, 152, 96, 0.5);
  --g-turquoise:       #0891B2;
  --g-turquoise-deep:  #0E7490;
  --g-ink:             #2C2A26;
  --g-cream-text:      #F5EFE0;
  --g-muted:           #7A7163;

  /* derived alpha tints */
  --g-ink-a08:  rgba(44, 42, 38, 0.08);
  --g-ink-a16:  rgba(44, 42, 38, 0.16);
  --g-ink-a18:  rgba(44, 42, 38, 0.18);
  --g-ink-a40:  rgba(44, 42, 38, 0.40);
  --g-ink-a55:  rgba(44, 42, 38, 0.55);
  --g-ink-a70:  rgba(44, 42, 38, 0.70);
  --g-rule:     rgba(184, 152, 96, 0.22);
  --g-cream-a40: rgba(245, 239, 224, 0.40);
  --g-cream-a70: rgba(245, 239, 224, 0.70);
  --g-cream-a90: rgba(245, 239, 224, 0.90);

  /* ─── Typography ───────────────────────────────────────────── */
  --g-font-display-ar: 'Reem Kufi', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --g-font-body-ar:    'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --g-font-latin:      'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --g-font-label:      'Inter', system-ui, sans-serif;

  --g-fs-display-xl:   clamp(40px, 7vw, 112px);
  --g-fs-display-lg:   clamp(34px, 5.2vw, 80px);
  --g-fs-display-md:   clamp(28px, 4vw, 56px);
  --g-fs-body-lg:      clamp(16px, 1.15vw, 19px);
  --g-fs-body:         clamp(15px, 1vw, 17px);
  --g-fs-body-sm:      clamp(13px, 0.9vw, 15px);
  --g-fs-label:        clamp(11px, 0.78vw, 12.5px);
  --g-fs-meta:         clamp(11.5px, 0.8vw, 13px);

  --g-lh-display:      1.14;
  --g-lh-snug:         1.4;
  --g-lh-body:         1.7;

  --g-ls-label:        0.18em;
  --g-ls-wordmark:     0.22em;
  --g-ls-display:      -0.01em;

  /* ─── Spacing scale ────────────────────────────────────────── */
  --g-s1:  4px;
  --g-s2:  8px;
  --g-s3:  12px;
  --g-s4:  16px;
  --g-s5:  24px;
  --g-s6:  32px;
  --g-s7:  48px;
  --g-s8:  64px;
  --g-s9:  80px;
  --g-s10: 96px;
  --g-s11: 120px;
  --g-s12: 160px;

  --g-pad-x: clamp(20px, 5vw, 64px);
  --g-pad-y: clamp(80px, 10vw, 140px);
  --g-container: 1240px;

  /* Global site header height (referenced by all sections for top-padding) */
  --site-header-h: 80px;

  /* ─── Radius ───────────────────────────────────────────────── */
  --g-r-1: 4px;
  --g-r-2: 8px;
  --g-r-3: 12px;
  --g-r-4: 16px;
  --g-r-5: 24px;
  --g-r-pill: 999px;
  /* Brand decision (locked): rectangular surfaces site-wide */
  --g-radius-button: 5px;
  --g-radius-card:   8px;
  --g-radius-input:  4px;

  /* ─── Shadows ──────────────────────────────────────────────── */
  --g-shadow-1: 0 1px 2px rgba(44, 42, 38, 0.04);
  --g-shadow-2: 0 2px 8px rgba(44, 42, 38, 0.05);
  --g-shadow-3: 0 6px 22px rgba(44, 42, 38, 0.07);
  --g-shadow-4: 0 12px 36px rgba(44, 42, 38, 0.10);
  --g-shadow-5: 0 24px 56px rgba(44, 42, 38, 0.14);
  --g-shadow-frame: 0 16px 48px -12px rgba(44, 42, 38, 0.18), 0 4px 12px rgba(44, 42, 38, 0.06);

  /* ─── Brass-frame motif (recurring brand signature) ────────── */
  --g-frame-w: 1.5px;
  --g-frame-color: var(--g-brass);

  /* ─── Z-index scale ────────────────────────────────────────── */
  --g-z-base:   1;
  --g-z-decor:  2;
  --g-z-content: 5;
  --g-z-overlay: 20;
  --g-z-header: 50;
  --g-z-float:  60;
  --g-z-modal:  80;
  --g-z-cursor: 100;

  /* ─── Motion ───────────────────────────────────────────────── */
  --g-dur-fast:   180ms;
  --g-dur-base:   280ms;
  --g-dur-slow:   520ms;
  --g-dur-cinema: 1200ms;

  --g-ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --g-ease-out-back: cubic-bezier(0.34, 1.32, 0.64, 1);
  --g-ease-soft:     cubic-bezier(0.4, 0, 0.2, 1);
  --g-ease-spring:   cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (max-width: 980px) {
  :root { --site-header-h: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --g-dur-fast:   0ms;
    --g-dur-base:   0ms;
    --g-dur-slow:   0ms;
    --g-dur-cinema: 0ms;
  }
}