/* ==========================================================================
   Zada Group — Design tokens (complete)
   Single source of truth for zadagroup.ca. Load this before base.css and
   components.css. Font files (Abigail.otf, SweetSansPro-*.otf) ship in
   ./fonts/ (woff2). Adjust the @font-face paths if you relocate them.
   ========================================================================== */
@font-face {
  font-family: 'Abigail';
  src: url('../fonts/abigail.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sweet Sans Pro';
  src: url('../fonts/sweet-sans-light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sweet Sans Pro';
  src: url('../fonts/sweet-sans-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sweet Sans Pro';
  src: url('../fonts/sweet-sans-medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sweet Sans Pro';
  src: url('../fonts/sweet-sans-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sweet Sans Pro';
  src: url('../fonts/sweet-sans-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Sweet Sans Pro';
  src: url('../fonts/sweet-sans-medium-italic.woff2') format('woff2');
  font-weight: 500; font-style: italic; font-display: swap;
}

:root {
  /* ------------------------------------------------------------------------
     COLOR — base palette (raw brand values)
     ------------------------------------------------------------------------ */
  --green-deepest: #041A10;   /* primary dark background, ink on light */
  --green-deep:    #052E19;   /* secondary deep green */
  --brown-dark:    #544541;   /* dark earth brown */
  --brown-warm:    #9F8163;   /* THE brand accent — warm gold-brown */
  --grey-warm:     #605D50;   /* warm grey, muted text on light */
  --grey-soft:     #89877A;   /* soft sage grey, placeholders */
  --off-white:     #E8E5E2;   /* primary light background / text on dark */
  --paper:         #F5F2EE;   /* warm paper, default page background */
  --black-cinema:  #0A0A0A;   /* near-black for cinematic dark sections */
  --black-pure:    #050505;   /* hero letterbox / video backdrop */

  /* Brown accent at opacity — borders, washes, hairlines on dark */
  --brown-08:  rgba(159, 129, 99, 0.08);
  --brown-15:  rgba(159, 129, 99, 0.15);
  --brown-25:  rgba(159, 129, 99, 0.25);
  --brown-40:  rgba(159, 129, 99, 0.40);

  /* Hairlines */
  --hairline:       rgba(232, 229, 226, 0.16);  /* on dark */
  --hairline-dark:  rgba(4, 26, 16, 0.12);      /* on light */

  /* Off-white at opacity — body copy on dark sections */
  --ink-on-dark:        rgba(232, 229, 226, 0.88);
  --ink-on-dark-soft:   rgba(232, 229, 226, 0.70);
  --ink-on-dark-faint:  rgba(232, 229, 226, 0.45);

  /* Semantic aliases */
  --color-accent:        var(--brown-warm);
  --color-accent-hover:  var(--off-white);

  --surface-page:        var(--paper);
  --surface-light:       var(--off-white);
  --surface-dark:        var(--green-deepest);
  --surface-cinema:      var(--black-cinema);
  --surface-card:        #ffffff;

  --text-strong:         var(--green-deepest);   /* headings on light */
  --text-body:           var(--green-deepest);
  --text-muted:          var(--grey-warm);
  --text-on-dark:        var(--off-white);
  --text-eyebrow:        var(--brown-warm);

  --border-subtle:       var(--hairline-dark);
  --border-on-dark:      var(--brown-25);
  --focus-ring:          var(--brown-warm);

  /* ------------------------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------------------------ */
  --font-serif: 'Abigail', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:  'Sweet Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-sans-airy: 'Sweet Sans Pro ExLight', 'Sweet Sans Pro', sans-serif;

  /* Legacy aliases (match the production site variable names) */
  --serif: var(--font-serif);
  --sans:  var(--font-sans);

  /* Weights */
  --fw-hairline: 100;
  --fw-thin:     200;
  --fw-light:    300;   /* default body weight */
  --fw-regular:  400;
  --fw-medium:   500;   /* eyebrows, buttons, labels */
  --fw-bold:     700;
  --fw-heavy:    800;

  /* Display scale (serif headings, fluid) */
  --text-display:  clamp(3rem, 8vw, 8rem);      /* hero h1 */
  --text-h1:       clamp(2.5rem, 6vw, 5.5rem);
  --text-h2:       clamp(2rem, 4.5vw, 3.75rem);
  --text-h3:       clamp(1.5rem, 2.5vw, 2.25rem);
  --text-h4:       clamp(1.125rem, 1.5vw, 1.5rem);

  /* Body scale (sans) */
  --text-lede:   1.25rem;
  --text-lg:     1.125rem;
  --text-base:   1.0625rem;
  --text-sm:     0.95rem;
  --text-xs:     0.82rem;   /* eyebrow / label */
  --text-2xs:    0.72rem;   /* fine print, footer headers */

  /* Line heights */
  --leading-display: 0.98;
  --leading-tight:   1.1;
  --leading-snug:    1.45;
  --leading-body:    1.75;

  /* Letter spacing */
  --tracking-display: -0.02em;  /* tighten large serif */
  --tracking-tight:   -0.01em;
  --tracking-body:     0.01em;
  --tracking-eyebrow:  0.20em;  /* wide uppercase labels */
  --tracking-button:   0.20em;  /* button labels */
  --tracking-cue:      0.32em;  /* widest — "scroll" cues */

  /* ------------------------------------------------------------------------
     LAYOUT + SPACING
     ------------------------------------------------------------------------ */
  --max-width: 1440px;
  --content-narrow: 880px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section-y: clamp(4rem, 8vw, 8rem);        /* default vertical section rhythm */
  --section-y-lg: clamp(6rem, 10vw, 10rem);   /* hero-adjacent / feature sections */

  /* Spacing scale */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-16: 6rem;

  /* Radius — the brand is mostly sharp; small radius only on inputs/buttons */
  --radius-none: 0;
  --radius-sm: 6px;     /* buttons, inputs */
  --radius-md: 14px;    /* device mockups only */
  --radius-pill: 999px; /* badges only if pill treatment is ever needed */

  /* Shadows — reserved for floating mockups and forms, never cards */
  --shadow-card:   0 20px 40px rgba(0, 0, 0, 0.15);
  --shadow-lift:   0 30px 60px rgba(0, 0, 0, 0.25);
  --shadow-cinema: 0 40px 80px rgba(0, 0, 0, 0.50);

  /* ------------------------------------------------------------------------
     MOTION
     ------------------------------------------------------------------------ */
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);  /* signature reveal ease */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.25s;    /* link fades, small state changes */
  --dur-base: 0.4s;     /* button hover fills */
  --dur-slow: 0.6s;     /* image zooms */
  --dur-reveal: 1.1s;   /* scroll reveals */
  --reveal-stagger: 0.15s;      /* delay step between staggered siblings */
  --reveal-distance: 40px;      /* translateY start for reveals */

  /* ------------------------------------------------------------------------
     BREAKPOINTS (reference values — use in @media queries; custom properties
     cannot be used inside media queries, so these are documented constants)
       --bp-sm:  640px    stacked mobile
       --bp-md:  768px    tablet portrait; footer grid collapses
       --bp-lg:  1024px   tablet landscape; asymmetric grids collapse
       --bp-nav: 1160px   nav links collapse to burger below this
       --bp-xl:  1440px   max content width
     ------------------------------------------------------------------------ */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-nav: 1160px;
  --bp-xl: 1440px;
}