/* ============================================================
   AL AKBAR — Design Tokens
   Brand colors, typography scale, spacing, motion, layout.
   Source of truth for the entire design system.
   ============================================================ */

:root {
  /* ── Brand Colors ─────────────────────────────────────────── */
  --color-primary:       #16311D;   /* Dark green — primary brand color */
  --color-primary-light: #1e4228;   /* Slightly lighter green for hover */
  --color-primary-dark:  #0e2114;   /* Deeper green for pressed states */

  --color-gold:          #C2954A;   /* Brand gold — accent only */
  --color-gold-light:    #d4ad6a;   /* Gold hover / glow */
  --color-gold-dark:     #a67d3a;   /* Gold pressed */
  --color-gold-glow:     rgba(194, 149, 74, 0.25); /* Gold shadow/glow */

  --color-cream:         #F4EFE6;   /* Warm off-white background */
  --color-white:         #FFFFFF;
  --color-black:         #0A0A0A;   /* Near-black for maximum contrast text */

  --color-gray:          #6E6E73;   /* Secondary/caption text */
  --color-gray-light:    #A1A1A6;   /* Tertiary text, borders */
  --color-gray-border:   #E5E5EA;   /* Subtle dividers on light bg */
  --color-gray-dark:     #48484A;   /* Subheadings on dark bg */

  /* ── Typography ───────────────────────────────────────────── */
  --font-family:         'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;

  /* Fluid type scale — clamp(min, preferred, max) */
  --text-hero:           clamp(2.75rem, 5vw + 1rem, 5.5rem);
  --text-h1:             clamp(2rem, 3.5vw + 0.5rem, 3.75rem);
  --text-h2:             clamp(1.5rem, 2.5vw + 0.5rem, 2.75rem);
  --text-h3:             clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem);
  --text-body:           clamp(1rem, 0.5vw + 0.85rem, 1.125rem);
  --text-body-lg:        clamp(1.05rem, 0.75vw + 0.85rem, 1.25rem);
  --text-caption:        clamp(0.75rem, 0.3vw + 0.65rem, 0.875rem);
  --text-overline:       clamp(0.7rem, 0.3vw + 0.6rem, 0.8125rem);

  /* Line heights */
  --leading-tight:       1.15;
  --leading-snug:        1.3;
  --leading-normal:      1.6;
  --leading-relaxed:     1.75;

  /* Letter spacing */
  --tracking-tight:      -0.02em;
  --tracking-normal:     0;
  --tracking-wide:       0.06em;
  --tracking-widest:     0.12em;

  /* ── Spacing (8px base grid) ──────────────────────────────── */
  --space-2xs:           0.25rem;   /*  4px */
  --space-xs:            0.5rem;    /*  8px */
  --space-sm:            0.75rem;   /* 12px */
  --space-md:            1rem;      /* 16px */
  --space-lg:            1.5rem;    /* 24px */
  --space-xl:            2rem;      /* 32px */
  --space-2xl:           3rem;      /* 48px */
  --space-3xl:           4rem;      /* 64px */
  --space-4xl:           6rem;      /* 96px */
  --space-5xl:           8rem;      /* 128px */

  /* Section vertical padding — generous by default */
  --section-padding:     clamp(4rem, 8vw, 8rem);

  /* ── Layout ───────────────────────────────────────────────── */
  --max-width:           1200px;
  --max-width-narrow:    800px;
  --max-width-wide:      1440px;
  --nav-height:          72px;
  --container-padding:   clamp(1.25rem, 4vw, 3rem);

  /* ── Borders & Radius ─────────────────────────────────────── */
  --radius-sm:           4px;
  --radius-md:           8px;
  --radius-lg:           12px;
  --radius-full:         9999px;

  /* ── Motion ───────────────────────────────────────────────── */
  --ease-premium:        cubic-bezier(0.25, 0.1, 0.25, 1.0);
  --ease-out-expo:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:         cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast:       0.2s;
  --duration-normal:     0.4s;
  --duration-slow:       0.6s;
  --duration-reveal:     0.8s;

  /* ── Shadows ──────────────────────────────────────────────── */
  --shadow-sm:           0 1px 2px rgba(10, 10, 10, 0.05);
  --shadow-md:           0 4px 12px rgba(10, 10, 10, 0.08);
  --shadow-lg:           0 8px 30px rgba(10, 10, 10, 0.12);
  --shadow-gold:         0 4px 20px var(--color-gold-glow);
}