/* ==========================================================================
   CSS Custom Properties — Berashith Ministry
   ========================================================================== */

:root {

  /* ------------------------------------------------------------------
     Colours
     ------------------------------------------------------------------ */
  --color-white:       #ffffff;
  --color-black:       #000000;
  --color-text:        #333333;
  --color-text-light:  #666666;
  --color-text-muted:  #999999;

  /* Gold — confirmed brand colour */
  --color-gold:        #C99D45;
  --color-gold-dark:   #a07d2e;
  --color-gold-light:  #dbb85a;
  --color-gold-glow:   rgba(201, 157, 69, 0.25);

  /* Dark section backgrounds */
  --color-dark:        #171515;   /* mission section */
  --color-warm:        #2a2416;   /* coming soon section */
  --color-footer:      #0d0d0d;   /* footer bg */

  /* UI surfaces */
  --color-surface:     #f7f6f4;
  --color-border:      #e4e1db;

  /* ------------------------------------------------------------------
     Typography
     ------------------------------------------------------------------ */
  --font-display: 'Oleo Script', cursive;
  --font-body:    'Roboto', 'Helvetica Neue', Arial, sans-serif;

  /* Fluid type scale */
  --text-xs:    0.75rem;    /*  12px */
  --text-sm:    0.875rem;   /*  14px */
  --text-base:  1rem;       /*  16px */
  --text-md:    1.125rem;   /*  18px */
  --text-lg:    1.25rem;    /*  20px */
  --text-xl:    1.5rem;     /*  24px */
  --text-2xl:   2rem;       /*  32px */
  --text-3xl:   2.5rem;     /*  40px */
  --text-4xl:   3rem;       /*  48px */
  --text-5xl:   3.75rem;    /*  60px */
  --text-6xl:   4.5rem;     /*  72px */

  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-base:   1.6;
  --leading-loose:  1.8;

  --tracking-tight:   -0.02em;
  --tracking-base:     0;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.1em;
  --tracking-widest:   0.2em;

  /* ------------------------------------------------------------------
     Spacing
     ------------------------------------------------------------------ */
  --sp-1:   0.25rem;   /*   4px */
  --sp-2:   0.5rem;    /*   8px */
  --sp-3:   0.75rem;   /*  12px */
  --sp-4:   1rem;      /*  16px */
  --sp-5:   1.25rem;   /*  20px */
  --sp-6:   1.5rem;    /*  24px */
  --sp-8:   2rem;      /*  32px */
  --sp-10:  2.5rem;    /*  40px */
  --sp-12:  3rem;      /*  48px */
  --sp-16:  4rem;      /*  64px */
  --sp-20:  5rem;      /*  80px */
  --sp-24:  6rem;      /*  96px */
  --sp-32:  8rem;      /* 128px */

  /* ------------------------------------------------------------------
     Layout
     ------------------------------------------------------------------ */
  --container-max:    1200px;
  --container-wide:   1440px;
  --container-narrow:  800px;

  --nav-height:       72px;
  --nav-height-mob:   60px;

  /* ------------------------------------------------------------------
     Border radius
     ------------------------------------------------------------------ */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* ------------------------------------------------------------------
     Shadows
     ------------------------------------------------------------------ */
  --shadow-sm:   0 1px 4px  rgba(0, 0, 0, 0.10);
  --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.14);
  --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.18);
  --shadow-xl:   0 16px 48px rgba(0, 0, 0, 0.22);
  --shadow-gold: 0 4px 24px rgba(201, 157, 69, 0.35);

  /* ------------------------------------------------------------------
     Transitions
     ------------------------------------------------------------------ */
  --ease-fast:   150ms ease;
  --ease-base:   250ms ease;
  --ease-slow:   400ms ease;
  --ease-nav:    300ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* ------------------------------------------------------------------
     Z-index
     ------------------------------------------------------------------ */
  --z-below:    -1;
  --z-base:      0;
  --z-above:    10;
  --z-dropdown: 100;
  --z-nav:      200;
  --z-overlay:  300;
  --z-drawer:   400;
}