/* ==========================================================================
   Noorani Function Hall: design tokens (Phase 1, 03.11.2026)
   Source of truth for colour, type, space, layout, shape and motion.
   Brand colours are sampled from the client's logo files, not invented:
     navy  #122442  (pillars and lettering, logo-transparent.png)
     deep  #0C1836  (darkest pillar shade)
     gold  #C0964E  (NH medallion, logo-medallion-nh.png)
   ========================================================================== */
:root{
  /* ---- Colour: brand ---- */
  --navy:        #122442;  /* primary: headings, primary buttons, active states */
  --navy-deep:   #0C1836;  /* hover and pressed state of navy, overlay base */
  --gold:        #C0964E;  /* accent: hairlines, focus ring, icons, active nav underline. Never body text. */
  --gold-text:   #85662C;  /* gold when it must be read as text (5.1:1 on ivory) */

  /* ---- Colour: surfaces ---- */
  --ivory:       #FAF8F3;  /* page background */
  --ivory-2:     #F2EEE5;  /* alternate section, image placeholder, footer */
  --white:       #FFFFFF;  /* inputs, calendar cells, review cards */

  /* ---- Colour: text ---- */
  --text:        #122442;  /* headings (= navy) */
  --text-body:   #2F3A55;  /* paragraphs (11.6:1 on ivory) */
  --text-muted:  #5F6679;  /* captions, meta (5.6:1 on ivory) */
  --text-invert: #FAF8F3;  /* text on navy or on photographs */

  /* ---- Colour: lines ---- */
  --line:        rgba(18,36,66,.12);  /* dividers, card borders */
  --line-strong: rgba(18,36,66,.28);  /* input borders, outline buttons */

  /* ---- Colour: functional (only where the meaning requires it) ---- */
  --wa:          #128C4A;  /* WhatsApp actions only (4.6:1 with white) */
  --wa-hover:    #0E7A3F;
  --error:       #B3261E;  /* form errors */
  --held-bg:     #F6ECD7;  /* calendar: date on hold */
  --booked:      #A3A8B6;  /* calendar: booked (struck through) */

  /* ---- Type families (max two) ---- */
  --font-display: 'Zodiak', Georgia, 'Times New Roman', serif;      /* headings, prices, dates. Weight 400 only. */
  --font-body:    'Switzer', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;  /* everything else: 400, 500, 600 */

  /* ---- Type scale (fluid between 360 px and 1440 px) ---- */
  --fs-display: clamp(2.5rem, 1.75rem + 3.3vw, 4.5rem);     /* 40 to 72: home hero only */
  --fs-h1:      clamp(2.25rem, 1.8rem + 2vw, 3.5rem);        /* 36 to 56: inner page titles */
  --fs-h2:      clamp(1.875rem, 1.55rem + 1.45vw, 2.75rem);  /* 30 to 44: section headings */
  --fs-h3:      clamp(1.375rem, 1.27rem + .45vw, 1.625rem);  /* 22 to 26: sub-headings, card titles */
  --fs-price:   clamp(2.5rem, 2rem + 2.2vw, 3.75rem);        /* 40 to 60: prices and big numbers */
  --fs-lead:    clamp(1.125rem, 1.07rem + .25vw, 1.25rem);   /* 18 to 20: intro paragraphs */
  --fs-body:    1.0625rem;  /* 17 */
  --fs-sm:      .9375rem;   /* 15: UI, nav, captions */
  --fs-xs:      .8125rem;   /* 13: meta, legal */

  --lh-tight: 1.08;  /* display, h1 */
  --lh-snug:  1.22;  /* h2, h3 */
  --lh-body:  1.62;  /* paragraphs */
  --track-display: -.02em;
  --track-heading: -.012em;
  --track-label:    .12em;  /* uppercase labels: footer column titles only */

  /* ---- Spacing scale (4 px base) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section-y: clamp(64px, 4rem + 4vw, 128px);  /* vertical padding of a section */
  --gutter:    clamp(20px, 5vw, 48px);           /* page side padding */

  /* ---- Layout widths ---- */
  --w-page:   1200px;  /* content container */
  --w-wide:   1440px;  /* full-bleed photography stops here on huge screens */
  --w-narrow: 760px;   /* forms, FAQs */
  --w-text:   64ch;    /* paragraphs */

  /* ---- Shape ---- */
  --r-1:     2px;     /* photos, cards, inputs, calendar cells */
  --r-pill:  999px;   /* buttons and the slot switch only */
  --r-sheet: 16px;    /* top corners of the phone bottom sheet */

  /* ---- Elevation: overlays only (menu, sheet, lightbox) ---- */
  --shadow-overlay: 0 24px 64px rgba(12,24,54,.22);

  /* ---- Motion ---- */
  --dur-1: 160ms;  /* hover, press */
  --dur-2: 320ms;  /* menus, toggles, sliding indicator */
  --dur-3: 560ms;  /* section fade, bottom sheet, lightbox */
  --ease:  cubic-bezier(.2,.8,.2,1);

  /* ---- Components ---- */
  --header-h: 72px;   /* 60px below 980px, set in components.css */
  --btn-h:    48px;
  --btn-h-sm: 40px;
  --field-h:  48px;
  --tap:      44px;   /* minimum touch target */
}
/* Breakpoints (media queries cannot read custom properties):
   380 small phone · 640 large phone · 980 desktop navigation · 1280 wide desktop */