/* =============================================================
   COLLECTIVE FLUID RESPONSIVE HTML/CSS SYSTEM - DESIGN TOKENS
   v0.2 - Property Lead Page Template
   Instance 1: Loam House (Auyin Property Developments)
   =============================================================
   This file is the SINGLE SOURCE OF TRUTH for the template.
   Future property clients populate the template by swapping the
   values in :root below - no other file needs to change.

   System reference: "Collective Fluid responsive HTML/CSS system"
   = a component-based fluid responsive HTML/CSS system with
     adaptive grids, fluid containers, fluid typography,
     responsive spacing, and mobile-first content hierarchy.
   =============================================================
*/

:root {

  /* ------- 1. COLOUR PALETTE (PROPERTY-SPECIFIC) ------- */
  /* Loam House values from Auyin_LoamHouse_Guidelines_V01.pdf  */

  --brand-color-primary:       #65230e;  /* Red Bluff   - primary ink, action */
  --brand-color-secondary:     #9b6737;  /* Golden Hour - secondary action, hover */
  --brand-color-surface-1:     #dfd9cb;  /* Sand Dunes  - primary surface, hero */
  --brand-color-surface-2:     #e1bfa6;  /* Summer Sunset - soft secondary surface */
  --brand-color-neutral:       #9da79f;  /* Sea Grass   - borders, dividers, muted */
  --brand-color-light:         #ffffff;  /* White        - reverse text, alternate surface */
  --brand-color-mono:          #000000;  /* Black        - mono fallback only */

  /* Tints / alpha overlays */
  --brand-color-surface-1-50:  color-mix(in srgb, var(--brand-color-surface-1) 50%, transparent);
  --brand-color-primary-90:    color-mix(in srgb, var(--brand-color-primary) 90%, transparent);
  --brand-color-mono-50:       rgba(0, 0, 0, 0.5);
  --brand-color-mono-65:       rgba(0, 0, 0, 0.65);

  /* ------- 2. SEMANTIC COLOUR ROLES (TEMPLATE-FIXED) ------- */
  /* Map roles onto the brand scale. Components reference only
     these tokens; brand colours can be swapped freely above.    */

  --color-ink-on-light:        var(--brand-color-primary);
  --color-ink-on-dark:         var(--brand-color-light);
  --color-ink-muted-on-light:  color-mix(in srgb, var(--brand-color-primary) 70%, var(--brand-color-light));
  --color-ink-muted-on-dark:   color-mix(in srgb, var(--brand-color-light) 75%, transparent);

  --color-surface-page:        var(--brand-color-surface-1);
  --color-surface-card:        var(--brand-color-surface-1);
  --color-surface-card-elevated: var(--brand-color-light);
  --color-surface-section-1:   var(--brand-color-primary);    /* hero / footer */
  --color-surface-section-2:   var(--brand-color-surface-1);  /* alternating */
  --color-surface-section-3:   var(--brand-color-light);      /* alternating */
  --color-surface-section-4:   var(--brand-color-neutral);    /* utility (site plan) */
  --color-surface-image-overlay: var(--brand-color-mono-50);

  --color-border-subtle:       color-mix(in srgb, var(--brand-color-neutral) 50%, transparent);
  --color-border-strong:       var(--brand-color-neutral);
  --color-border-input:        color-mix(in srgb, var(--brand-color-neutral) 70%, transparent);
  --color-border-input-focus:  var(--brand-color-primary);

  --color-action-primary-bg:   var(--brand-color-primary);
  --color-action-primary-fg:   var(--brand-color-light);
  --color-action-primary-hover-bg: var(--brand-color-secondary);
  --color-action-secondary-bg: var(--brand-color-surface-1);
  --color-action-secondary-fg: var(--brand-color-primary);
  --color-action-secondary-hover-bg: color-mix(in srgb, var(--brand-color-surface-1) 80%, var(--brand-color-light));

  --color-validation-error:     #b54234;
  --color-validation-success:   #5b7a5b;

  /* ------- 3. TYPOGRAPHY (PROPERTY-SPECIFIC) ------- */

  --font-display: "Solare", "Cormorant Garamond", Georgia, serif;
  --font-body:    "Swiss 721", "Helvetica Neue", system-ui, -apple-system, Arial, sans-serif;

  --font-weight-display: 400;     /* Solare Regular  */
  --font-weight-body-light: 300;  /* Swiss 721 Light */
  --font-weight-body: 400;        /* Swiss 721 Roman */

  /* ------- 4. FLUID TYPE SCALE - CLAMP-BASED ------- */
  /* Pattern: clamp(min, fluid-vw-curve, max)
     Continuous scaling between mobile floor and desktop ceiling. */

  --type-display-xl: clamp(2.75rem, 5.5vw + 0.5rem, 5.5rem);    /* Hero H1 */
  --type-display-lg: clamp(2rem,    4vw + 0.5rem,   3.5rem);    /* Section H2 */
  --type-display-md: clamp(1.5rem,  2.5vw + 0.5rem, 2.25rem);   /* Sub-headline */
  --type-heading-md: clamp(1.125rem, 0.75vw + 1rem, 1.5rem);    /* H3 */
  --type-heading-sm: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);   /* H4 / form heading */
  --type-eyebrow:    clamp(0.75rem, 0.15vw + 0.7rem, 0.8125rem);
  --type-body-lg:    clamp(1.0625rem, 0.4vw + 0.95rem, 1.1875rem);
  --type-body:       clamp(1rem, 0.25vw + 0.9rem, 1.0625rem);
  --type-body-sm:    clamp(0.875rem, 0.15vw + 0.825rem, 0.9375rem);
  --type-button:     clamp(0.9375rem, 0.2vw + 0.875rem, 1rem);
  --type-stat-value: clamp(2.5rem, 4vw + 1rem, 4rem);
  --type-stat-label: var(--type-body-sm);

  --leading-display-tight: 1.05;
  --leading-display-snug:  1.15;
  --leading-body:          1.6;     /* generous, per brand directive */
  --leading-body-tight:    1.4;
  --leading-button:        1.2;

  --tracking-display-tight: 0;
  --tracking-display-spacious: 0.02em;
  --tracking-display-airy: 0.06em;
  --tracking-eyebrow: 0.18em;
  --tracking-button: 0.04em;
  --tracking-body: 0;

  /* ------- 5. FLUID SPACING SCALE ------- */
  /* Brand directive: generous space. Scale skews larger than default. */

  --space-3xs: 0.25rem;   /*  4px */
  --space-2xs: 0.5rem;    /*  8px */
  --space-xs:  0.75rem;   /* 12px */
  --space-sm:  1rem;      /* 16px */
  --space-md:  1.5rem;    /* 24px */
  --space-lg:  2.5rem;    /* 40px */
  --space-xl:  4rem;      /* 64px */
  --space-2xl: 6rem;      /* 96px */
  --space-3xl: 9rem;      /* 144px */

  /* Section vertical rhythm - fluid */
  --space-section-y:         clamp(4rem, 9vw, 9rem);
  --space-section-y-compact: clamp(2.5rem, 5vw, 5rem);

  /* Stack gaps */
  --space-stack-tight: var(--space-sm);
  --space-stack:       var(--space-md);
  --space-stack-loose: var(--space-lg);

  /* ------- 6. SHELL (canonical Collective container) ------- */
  /* Pattern: width: min(100% - var(--shell-gutter), var(--shell-max))
     This is the "fluid container" - fills available width on small
     screens while preserving an edge gutter, caps at max-width on
     large screens, centres always.                                  */

  --shell-max:        1240px;     /* canonical Collective max-width */
  --shell-gutter:     36px;       /* total horizontal gutter (18px each side) */
  --shell-narrow-max: 880px;      /* centred prose sections */
  --shell-wide-max:   1440px;     /* image strips, galleries */
  --shell-gutter-fluid: clamp(20px, 4vw, 56px);  /* alt fluid gutter for image-led sections */

  /* Section padding-y - fluid */
  --section-padding-y: clamp(48px, 8vw + 16px, 144px);
  --section-padding-y-compact: clamp(32px, 5vw + 8px, 80px);

  /* Card internal padding - fluid */
  --card-padding: clamp(20px, 3vw, 40px);

  /* Grid gaps - fluid */
  --grid-gap-tight: clamp(12px, 2vw, 20px);
  --grid-gap:       clamp(20px, 3vw, 40px);
  --grid-gap-loose: clamp(32px, 5vw, 64px);

  /* ------- 7. BREAKPOINTS (use sparingly - for shape changes only) ------- */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ------- 7a. CFR LANDING PAGE RATIO SYSTEM (branch CKF, locked May 2026) ------- */
  /* Four-ratio core for landing-page media. Apply ratios to media
     COMPONENTS (hero-media, content-media, portrait-media, square-media),
     not page sections. Carousels inherit ratio from underlying media type. */

  --ratio-hero:      16 / 9;   /* hero / wide banner media */
  --ratio-landscape: 3 / 2;    /* standard landscape content (primary default) */
  --ratio-portrait:  4 / 5;    /* people-led portrait, founder/team */
  --ratio-square:    1 / 1;    /* utility: avatars, icons, logos, compact cards */

  /* Exceptions - use only with documented art-direction reason: */
  --ratio-editorial: 4 / 3;    /* editorial / balanced-card option */
  --ratio-cinematic: 21 / 9;   /* rare art-direction exception */

  /* ------- 8. RADIUS ------- */
  --radius-none: 0;
  --radius-sm:   2px;     /* form fields */
  --radius-md:   4px;     /* buttons, image cards */
  --radius-lg:   8px;     /* feature cards (sparingly) */
  --radius-pill: 999px;   /* secondary CTA over imagery */

  /* ------- 9. BORDERS ------- */
  --border-hairline: 1px solid var(--color-border-subtle);
  --border-strong:   1px solid var(--color-border-strong);
  --border-input:    1px solid var(--color-border-input);

  /* ------- 10. ELEVATION ------- */
  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 2px 8px rgba(0,0,0,0.06);
  --shadow-card: 0 4px 16px rgba(0,0,0,0.08);

  /* ------- 11. MOTION (restrained - luxury / architectural tone) ------- */
  --motion-duration-fast:    150ms;
  --motion-duration-default: 250ms;
  --motion-duration-slow:    400ms;
  --motion-duration-slower:  600ms;

  --motion-easing-default:    cubic-bezier(0.4, 0, 0.2, 1);
  --motion-easing-emphasised: cubic-bezier(0.2, 0, 0, 1);
  --motion-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);

  /* ------- 12. Z-INDEX ------- */
  --z-base:    1;
  --z-content: 10;
  --z-overlay: 100;
  --z-header:  500;
  --z-modal:   1000;
  --z-toast:   2000;
}

/* =============================================================
   FONT-FACE DECLARATIONS
   ============================================================= */

@font-face {
  font-family: "Solare";
  src: url("/assets/fonts/Solare-Regular.woff2") format("woff2"),
       url("/assets/fonts/Solare-Regular.woff")  format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Swiss 721";
  src: url("/assets/fonts/Swiss-721-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Swiss 721";
  src: url("/assets/fonts/Swiss-721-Light-Italic.woff2") format("woff2");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Swiss 721";
  src: url("/assets/fonts/Swiss-721-Roman.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* =============================================================
   GLOBAL RESETS / DEFAULTS
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-light);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  color: var(--color-ink-on-light);
  background-color: var(--color-surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  line-height: var(--leading-display-tight);
  letter-spacing: var(--tracking-display-spacious);
  margin: 0 0 var(--space-md) 0;
}

h1 { font-size: var(--type-display-xl); }
h2 { font-size: var(--type-display-lg); }
h3 { font-size: var(--type-heading-md); font-family: var(--font-body); font-weight: var(--font-weight-body); letter-spacing: var(--tracking-display-airy); }

p { margin: 0 0 var(--space-sm) 0; }
img, svg { max-width: 100%; height: auto; display: block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}