/* ============================================
   ALMATUGA DESIGN TOKENS — Single source of truth
   Colors defined here. Tailwind config (tailwind.config.js)
   mirrors the same hex values for utility classes.
   When changing a brand color: update here AND tailwind.config.js,
   then rebuild CSS: npx tailwindcss -i css/tailwind-input.css -o css/tailwind.css --minify
   Grid: 4px baseline
   ============================================ */

:root {
  /* ── Brand Colors (FROM LOGO) ── */
  --brand-orange:       #F15922;
  --brand-orange-dark:  #C74A1A;
  --brand-orange-light: #F47B4F;
  --brand-green:        #4E9B47;
  --brand-green-dark:   #3E8239;
  --brand-green-mid:    #468E40;
  --brand-yellow:       #FFC20E;
  --brand-yellow-dark:  #E6B10F;

  /* ── Neutrals ── */
  --black:       #0D0D0D;
  --white:       #FFFFFF;
  --gray-950:    #141414;
  --gray-900:    #1A1A1A;
  --gray-800:    #2D2D2D;
  --gray-700:    #404040;
  --gray-600:    #525252;
  --gray-500:    #6B6B6B;
  --gray-400:    #8A8A8A;
  --gray-300:    #B0B0B0;
  --gray-200:    #D4D4D4;
  --gray-100:    #EBEBEB;
  --gray-50:     #F5F5F5;
  --gray-25:     #FAFAFA;

  /* ── Typography ── */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Fluid type scale */
  --text-xs:    0.75rem;
  --text-sm:    clamp(0.8rem, 0.75rem + 0.15vw, 0.875rem);
  --text-base:  clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  --text-lg:    clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  --text-xl:    clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
  --text-2xl:   clamp(1.4rem, 1.2rem + 1vw, 1.75rem);
  --text-3xl:   clamp(1.8rem, 1.4rem + 2vw, 2.5rem);
  --text-4xl:   clamp(2.2rem, 1.6rem + 3vw, 3.5rem);
  --text-hero:  clamp(2.8rem, 2rem + 4vw, 5.5rem);

  /* Leading */
  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.7;
  --leading-relaxed: 1.85;

  /* Tracking */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.08em;
  --tracking-wider:    0.15em;
  --tracking-widest:   0.25em;

  /* ── Spacing (4px grid) ── */
  --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;
  --sp-32: 128px;

  /* ── Layout ── */
  --max-w: 1200px;
  --content-px: clamp(24px, 5vw, 64px);

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(13,13,13,0.04);
  --shadow-md:  0 4px 16px rgba(13,13,13,0.06);
  --shadow-lg:  0 8px 32px rgba(13,13,13,0.08);
  --shadow-xl:  0 16px 48px rgba(13,13,13,0.1);

  /* ── Motion ── */
  --ease:     cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur:      300ms;
  --dur-slow: 600ms;
  --dur-reveal: 800ms;

  /* ── Z-index ── */
  --z-nav: 1000;
  --z-mobile-menu: 10000;
}