/*
 * GURU NANAK NAAM LEVA SANGAT — Design tokens
 * Single source of truth. Nothing else in the theme declares a colour or spacing value.
 * WCAG 2.1 AA contrast ratios measured with check-contrast.php (see tools/design-tokens.json).
 *
 * Accent gold (#C98A3E) is purely decorative — 2.92:1 on white, no contrast requirement
 * applies to decorative fills. Do not use it for text or meaningful icons.
 */
:root {

  /* ── Core palette ─────────────────────────────────────────────────────── */
  --c-primary:        #1B4A5A;  /* 9.66:1 on white · 8.58:1 on surface */
  --c-primary-hover:  #14394A;
  --c-secondary:      #2E6E5E;  /* 5.99:1 on white · 5.32:1 on surface */
  --c-secondary-hover:#245848;
  --c-accent:         #C98A3E;  /* decorative only — do not use as text or icon */
  /* The text-safe counterpart of the accent, for use ON DARK grounds only.
     5.16:1 on --c-primary, 7.47:1 on the hero gradient's darkest stop — both
     clear the 4.5:1 floor at the 13px the eyebrow is set in. On white it is
     1.87:1, so it must never be used on a light ground. Two tokens exist for
     this colour because one hex cannot serve as both a decorative fill and as
     text on dark. */
  --c-accent-on-dark: #E8B563;

  /* ── CTA family ──────────────────────────────────────────────────────── */
  --c-cta-btn:        #A84524;  /* 5.93:1 on white — use as button background */
  --c-cta-btn-hover:  #8D3A1E;
  --c-cta-icon:       #C1512F;  /* 4.68:1 on white, 4.16:1 on surface — icons ≥3:1 ✓ */

  /* ── Surfaces ────────────────────────────────────────────────────────── */
  --c-bg:             #FFFFFF;
  --c-surface:        #F5F1EA;
  --c-surface-alt:    #EEE9DF;

  /* ── Text ────────────────────────────────────────────────────────────── */
  --c-text:           #22282B;  /* 14.93:1 on white · 13.26:1 on surface */
  --c-muted:          #5C6469;  /* 6.03:1 on white  ·  5.36:1 on surface */
  --c-on-primary:     #FFFFFF;  /* 9.66:1 on --c-primary */
  --c-on-secondary:   #FFFFFF;  /* 5.99:1 on --c-secondary */
  --c-on-cta:         #FFFFFF;  /* 5.93:1 on --c-cta-btn */

  /* ── Borders ─────────────────────────────────────────────────────────── */
  --c-border:         #E2DED4;  /* decorative dividers — no contrast req */
  --c-border-input:   #8A9198;  /* 3.19:1 on white — form field outlines ✓ */

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font-heading:     'Lora', 'Georgia', serif;
  --font-body:        'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;

  /* ── Type scale (clamp: min at 320px, preferred, max at 1440px) ───────── */
  --fs-h1:    clamp(2.25rem,  1.55rem + 2.9vw,  3.5rem);
  --fs-h2:    clamp(1.75rem,  1.25rem + 2.1vw,  2.75rem);
  --fs-h3:    clamp(1.375rem, 1.1rem  + 1.15vw, 2.0rem);
  --fs-h4:    clamp(1.125rem, 1.0rem  + 0.52vw, 1.5rem);
  --fs-body:  1.0625rem;  /* 17px */
  --fs-small: 0.9375rem;  /* 15px */
  --fs-xs:    0.8125rem;  /* 13px */
  --lh-heading: 1.25;
  --lh-body:    1.7;

  /* ── Spacing (8pt scale) ─────────────────────────────────────────────── */
  --sp-1:  0.25rem;   /*  4px */
  --sp-2:  0.5rem;    /*  8px */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --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 ──────────────────────────────────────────────────────────── */
  --max-w:         1200px;
  --max-w-narrow:  760px;
  --gutter:        1.5rem;

  /* ── Components ──────────────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-lg:  16px;
  --radius-pill: 100px;
  --shadow-sm:  0 1px 3px  rgba(27,74,90,.10);
  --shadow:     0 4px 16px rgba(27,74,90,.12);
  --shadow-lg:  0 8px 32px rgba(27,74,90,.16);
  --shadow-cta: 0 4px 12px rgba(168,69,36,.30);

  /* ── Tap target ──────────────────────────────────────────────────────── */
  --tap: 44px;

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(.22,1,.36,1);
  --t-fast:   180ms;
  --t-base:   300ms;
  --t-slow:   600ms;

  /* ── Photo overlays ──────────────────────────────────────────────────── */
  /* Re-measure against actual client photos before launch. */
  --overlay-dark:   rgba(22,28,31,.70);
  --overlay-medium: rgba(27,74,90,.55);
}