/* =============================================================================
   OURHAUS DESIGN TOKENS
   Source: Figma — OurHause Design for Dev (19-02-2026)
   Canvas: 1440px wide, desktop-first
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     COLORS
  --------------------------------------------------------------------------- */
  --color-dark:          #171717;   /* Footer bg, dark section bg */
  --color-dark-text:     #1e1e1e;   /* Primary body text */
  --color-light-black:   #383838;   /* Secondary dark text */
  --color-lighter-black: #797979;   /* Process step labels, muted numbers */
  --color-muted:         #999999;   /* Section labels, secondary text, footer links */
  --color-secondary-text: #666666;  /* For Sale card meta + price labels — Figma 108:283, 108:322 */
  --color-grey-2:        #D1D1D1;   /* Dividers, disabled states */
  --color-white:         #ffffff;
  --color-bg-light:      #F5F6F8;   /* Card bg, dropdown selected bg */
  --color-nav-overlay:   rgba(0, 0, 0, 0.10); /* Nav glass overlay */
  --color-card-bg:       #F5F6F8;   /* Light card backgrounds (was #f5f5f5 — corrected) */
  --color-border:        rgba(153, 153, 153, 0.3);
  --color-error:         #C8102E;   /* Validation error */
  --color-success:       #03891A;   /* Validation success / subscribe checkmark */
  --color-link:          #1565C0;   /* Inline text links (e.g. FAQ answer anchors) */

  /* ---------------------------------------------------------------------------
     TYPOGRAPHY
  --------------------------------------------------------------------------- */
  --font-primary:   'Plus Jakarta Sans', sans-serif; /* Body / headings */
  --font-secondary: 'Inter', sans-serif;             /* Nav, labels, CTAs */
  /* Team bio signatures — Great Vibes (Google Fonts), Figma-spec size/color below */
  --font-signature: 'Great Vibes', cursive;

  /* Signature line — About team bios (Figma 127:240: 36px / 20px / #343435) */
  --fs-signature:    36px;
  --lh-signature:    20px;
  --color-signature: #343435;

  /* Font sizes — matches Figma type scale exactly */
  --fs-label:    12px;   /* Nav items, buttons, footer col headers */
  --fs-body-sm:  12px;   /* Small body (footer nav, captions) */
  --fs-body:     14px;   /* General body copy + section labels */
  --fs-body-mobile: 16px;
  --fs-subtitle: 18px;   /* Subtitles, card names, quote text (was 16px) */
  --fs-h3:       32px;   /* Break banner heading, stat numbers (was 24px) */
  --fs-h3-mobile: 36px;
  --fs-h2:       60px;   /* Section headings (was 48px) */
  --fs-h1:       72px;   /* Hero headings (was 64px) */

  /* Line heights */
  --lh-label:    20px;
  --lh-body:     1.6;
  --lh-h3:       38px;   /* matches 32px/38px Figma scale */
  --lh-h2:       68px;   /* matches 60px/68px Figma scale */
  --lh-h1:       80px;   /* matches 72px/80px Figma scale */

  /* Letter spacing */
  --ls-label: 7px;   /* Uppercase section labels ("the process", "the concept") */
  --ls-nav:   0;

  /* Font weights */
  --fw-light:     300;   /* Section headings (h1, h2) */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;   /* Author names, card titles, "Read more" links */

  /* ---------------------------------------------------------------------------
     SPACING & LAYOUT
  --------------------------------------------------------------------------- */
  --container-max:     1440px;
  --container-padding: 100px;     /* Left/right page margin */
  --content-width:     1240px;    /* 1440 - 2×100 */

  /* Column system (3-col at 400px each with 20px gap at 1240px content) */
  --col-3:    400px;
  /* Fluid gap: same ratio as Figma (20px ÷ 1240px content) × usable width */
  --col-gap: clamp(
    12px,
    calc((100vw - 2 * var(--container-padding)) * 20 / 1240),
    40px
  );

  /* Section vertical spacing */
  --section-padding-y: 60px;
  --section-gap:       60px;      /* Gap between section label and heading */

  /* ---------------------------------------------------------------------------
     COMPONENTS
  --------------------------------------------------------------------------- */
  /* Nav */
  --nav-height:      70px;
  --nav-blur:        2.5px;
  /* Single-property white bar — Figma 108:591 */
  --nav-bar-shadow:  0 4px 24px rgba(30, 30, 30, 0.36);

  /* Buttons — CTA Dark */
  --btn-dark-bg:     var(--color-dark-text);
  --btn-dark-color:  var(--color-white);
  --btn-dark-px:     30px;
  --btn-dark-py:     10px;
  --btn-dark-h:      38px;
  --btn-dark-h-lg:   50px;

  /* Buttons — CTA Small (outlined) */
  --btn-sm-border:   var(--color-white);
  --btn-sm-color:    var(--color-white);
  --btn-sm-px:       30px;
  --btn-sm-py:       10px;

  /* Cards */
  --card-radius:     8px;
  --card-padding:    40px;

  /* Footer */
  --footer-height:   518px;
  --footer-bg:       var(--color-dark);

  /* ---------------------------------------------------------------------------
     BREAKPOINTS (for reference — used in @media queries)
  --------------------------------------------------------------------------- */
  /* --bp-desktop: 1440px */
  /* --bp-laptop:  1280px */
  /* --bp-tablet:  1024px */
  /* --bp-mobile:  768px  */
}

/* Medium screens (tablet / small laptop): reduce side padding so content
   doesn't look too narrow vs the full-width fixed nav bar. */
@media (min-width: 769px) and (max-width: 1199px) {
  :root {
    --container-padding: 60px;
    --content-width: calc(100vw - 2 * 60px);
  }
}

/* Large desktops (1200–1919px): standard Figma artboard padding */
/* --container-padding stays 100px from :root; listed here for clarity */

/* Wide viewports only. Use 1920px (not 1600px): browser zoom changes the CSS
   viewport width, so a lower breakpoint flips when users zoom out (e.g. 90%),
   which suddenly swaps --content-width and breaks alignment with the header. */
@media (min-width: 1920px) {
  :root {
    --container-max: 1920px;
    --container-padding: 120px;
    --content-width: calc(var(--container-max) - 2 * var(--container-padding));
  }
}

@media (max-width: 768px) {
  :root {
    /* Sections use ~20px horizontal padding; keep gap proportional on small screens */
    --col-gap: clamp(12px, calc((100vw - 40px) * 20 / 1240), 20px);
  }
}