/* ============================================================
   Downeast Remodeling: Design Tokens
   Single source of truth. Every page imports this file first.
   Change a value here and it propagates site-wide.
   ============================================================ */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/newsreader-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/newsreader-italic-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-latin.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* ---------- Brand palette ----------
     Harbor navy (primary) + brass (accent) + sand (warm neutral) + white.
     Contrast-checked: brand-900 on white 13.8:1; ink-900 on sand-50 13.9:1;
     white on brand-900 13.8:1; brand-950 on accent-400 7.9:1. */
  --brand-950: #06202b;
  --brand-900: #0a2e3d;
  --brand-800: #104052;
  --brand-700: #1a566e;
  --brand-100: #d9e5ea;

  --accent-700: #765225;
  --accent-600: #a87b41;
  --accent-500: #c29254;
  --accent-400: #d8b078;
  --accent-100: #f3e7d3;

  --sand-50:  #fbf8f2;
  --sand-100: #f5efe4;
  --sand-200: #eae0ce;
  --sand-300: #d8c9ae;

  --ink-900: #10222c;
  --ink-700: #31454f;
  --ink-500: #5a6e77;

  --white: #ffffff;

  /* ---------- Semantic aliases ---------- */
  --color-bg: var(--white);
  --color-surface: var(--sand-50);
  --color-surface-alt: var(--sand-100);
  --color-ink: var(--ink-900);
  --color-ink-soft: var(--ink-700);
  --color-ink-muted: var(--ink-500);
  --color-brand: var(--brand-900);
  --color-brand-deep: var(--brand-950);
  --color-accent: var(--accent-500);
  --color-accent-strong: var(--accent-600);
  --color-line: var(--sand-200);
  --color-on-brand: var(--white);
  --color-on-photo-soft: rgb(255 255 255 / 0.88);
  --color-error: #8f2d24;
  --color-error-surface: #fff4f1;
  --color-success: #1f6247;
  --color-success-surface: #eff8f3;
  --color-disabled: var(--sand-200);

  /* ---------- Type ----------
     Two families only: Newsreader (display) + Source Sans 3 (body). */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-body: "Source Sans 3", "Segoe UI", sans-serif;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-regular: 400;

  --fs-xs:   0.8125rem;  /* 13px: eyebrows, legal        */
  --fs-sm:   clamp(0.9375rem, 0.9rem + 0.12vw, 1rem);
  --fs-body: clamp(1.0625rem, 1rem + 0.16vw, 1.125rem);
  --fs-lead: clamp(1.125rem, 1.04rem + 0.3vw, 1.375rem);
  --fs-card-title: clamp(1.25rem, 1.15rem + 0.25vw, 1.375rem);
  --fs-h3:   clamp(1.1875rem, 1.08rem + 0.55vw, 1.5rem);
  --fs-h2:   clamp(1.75rem, 1.35rem + 2vw, 2.625rem);
  --fs-h1:   clamp(2.375rem, 1.6rem + 3.9vw, 3.75rem);
  --fs-hero: clamp(2.75rem, 1.7rem + 5.2vw, 5rem);
  --fs-hero-mobile: 2.5rem;
  --fs-ornament: 4.5rem;

  /* ---------- Spacing: strict 8px scale ---------- */
  --space-1:  0.5rem;    /*  8px  */
  --space-2:  1rem;      /*  16px */
  --space-3:  1.5rem;    /*  24px */
  --space-4:  2rem;      /*  32px */
  --space-5:  2.5rem;    /*  40px */
  --space-6:  3rem;      /*  48px */
  --space-8:  4rem;      /*  64px */
  --space-10: 5rem;      /*  80px */
  --space-12: 6rem;      /*  96px */
  --space-16: 8rem;      /* 128px */

  --section-y: clamp(var(--space-8), 8vw, var(--space-12));
  --section-y-interior: clamp(var(--space-6), 6vw, var(--space-8));
  --gutter: clamp(var(--space-2), 4vw, var(--space-6));

  /* ---------- Layout ---------- */
  --container-max: 82.5rem;  /* 1320px; every section shares this */

  --measure-hero: 52rem;
  --measure-hero-copy: 36rem;
  --measure-content: 48rem;
  --measure-form: 44rem;
  --measure-consultation: 60rem;
  --measure-aside: 28rem;
  --field-min-h: 3rem;
  --choice-min-h: 2.75rem;
  --textarea-min-h: 10rem;
  --textarea-compact-min-h: 7rem;
  --target-min: 1.5rem;
  --progress-track-h: 0.375rem;
  --progress-marker: 2rem;
  --form-step-count: 3;
  --border-thin: 0.0625rem;
  --card-image-h: 12rem;
  --card-service-min: 22rem;
  --card-step-min: 22.5rem;
  --card-step-min-mobile: 18rem;
  --service-card-media-h: 10rem;
  --service-card-media-h-mobile: 6rem;
  --content-support-media-min: 12rem;
  --service-hero-min: 32rem;
  --service-hero-min-mobile: 30rem;
  --page-hero-min: 28rem;
  --page-hero-min-mobile: 26rem;
  --ratio-landscape: 4 / 3;
  --tracking-wide: 0.16em;
  --image-zoom: 1.06;

  /* ---------- Page imagery ---------- */
  --image-hero-services: url("../assets/img/hero-services.webp");
  --image-hero-service-areas: url("../assets/img/hero-service-areas.webp");
  --image-hero-about: url("../assets/img/hero-about.webp");
  --image-hero-contact: url("../assets/img/hero-contact.webp");
  --image-hero-gallery: url("../assets/img/hero-gallery.webp");

  /* ---------- Image treatments ---------- */
  --hero-scrim:
    linear-gradient(90deg, rgb(6 32 43 / 0.80) 0%, rgb(6 32 43 / 0.58) 42%, rgb(6 32 43 / 0.12) 78%),
    linear-gradient(0deg, rgb(6 32 43 / 0.56) 0%, transparent 45%);
  --hero-scrim-mobile:
    linear-gradient(90deg, rgb(6 32 43 / 0.76) 0%, rgb(6 32 43 / 0.56) 100%),
    linear-gradient(0deg, rgb(6 32 43 / 0.58) 0%, transparent 60%);
  --service-card-scrim:
    linear-gradient(0deg, rgb(6 32 43 / 0.94) 0%, rgb(6 32 43 / 0.72) 58%, rgb(6 32 43 / 0.52) 100%);
  --service-hero-scrim:
    linear-gradient(90deg, rgb(6 32 43 / 0.92) 0%, rgb(6 32 43 / 0.70) 48%, rgb(6 32 43 / 0.28) 100%),
    linear-gradient(0deg, rgb(6 32 43 / 0.42) 0%, transparent 62%);
  --page-hero-scrim:
    linear-gradient(90deg, rgb(6 32 43 / 0.92) 0%, rgb(6 32 43 / 0.68) 54%, rgb(6 32 43 / 0.30) 100%),
    linear-gradient(0deg, rgb(6 32 43 / 0.46) 0%, transparent 64%);

  /* ---------- Radius & shadow scale ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgb(6 32 43 / 0.06), 0 2px 8px rgb(6 32 43 / 0.06);
  --shadow-2: 0 4px 16px rgb(6 32 43 / 0.10), 0 2px 6px rgb(6 32 43 / 0.06);
  --shadow-3: 0 14px 40px rgb(6 32 43 / 0.18);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 160ms;
  --dur-med:  320ms;
  --dur-slow: 640ms;

  /* ---------- Header geometry ---------- */
  --header-h: 4.5rem;      /* 72px, matches .site-header */
}