/* ==========================================================================
   DESIGN TOKENS — Main Point Construction
   Edit this file to restyle the whole site. Do not hard-code values elsewhere.
   Source: https://mainpointconstruction.com/ (analyzed 2026-10-08), see DESIGN.md
   ========================================================================== */

:root {
  /* ---------- Primitives: palette ---------- */
  --green-50:  #eef5e8;
  --green-300: #8ac35a;   /* light green text on very dark surfaces */
  --green-400: #6ba23c;   /* reference brand green (logo "POINT", nav active) */
  --green-600: #47802a;   /* reference bright button green, darkened for AA with white text */
  --green-700: #3c6b3e;   /* reference dark green (buttons, subtitles on light) */
  --green-800: #2f5631;

  --gold-400: #f6b800;    /* rating stars */

  --cream-100: #edece6;   /* logo wordmark */

  --neutral-0:   #ffffff;
  --neutral-50:  #f5f5f5;
  --neutral-100: #ececec;
  --neutral-200: #d8d8d8;
  --neutral-300: #c4c4c4;
  --neutral-400: #a2a2a2;
  --neutral-500: #6b6b6b;
  --neutral-700: #3a3a3a;
  --neutral-800: #222222;
  --neutral-900: #111111;
  --neutral-1000: #000000;

  --red-600: #c62828;
  --yellow-600: #b7791f;

  /* ---------- Semantic: colors ---------- */
  --color-bg:              var(--neutral-0);
  --color-bg-alt:          var(--neutral-50);   /* light grey sections */
  --color-surface:         var(--neutral-0);    /* cards, inputs */
  --color-surface-inverse: var(--neutral-800);  /* dark sections, footer, top bar */
  --color-surface-deep:    var(--neutral-1000); /* nav bar, footer bottom bar, integrity card */

  --color-text:          var(--neutral-900);
  --color-text-muted:    var(--neutral-500);
  --color-text-inverse:  var(--neutral-0);
  --color-text-inverse-muted: var(--neutral-400);
  --color-heading:       var(--neutral-900);

  --color-primary:       var(--green-700);
  --color-primary-hover: var(--green-800);
  --color-primary-soft:  var(--green-50);
  --color-on-primary:    var(--neutral-0);

  --color-accent:        var(--green-600);
  --color-accent-hover:  var(--green-700);
  --color-on-accent:     var(--neutral-0);

  --color-brand-light:   var(--green-400);       /* green text on dark backgrounds */
  --color-brand-lighter: var(--green-300);
  --color-subtitle:      var(--green-700);       /* section subtitles on light */

  --color-link:          var(--green-700);
  --color-link-hover:    var(--green-800);

  --color-border:        var(--neutral-200);
  --color-border-strong: var(--neutral-300);
  --color-focus:         var(--green-400);

  --color-success:       var(--green-700);
  --color-warning:       var(--yellow-600);
  --color-danger:        var(--red-600);
  --color-star:          var(--gold-400);
  --color-star-empty:    var(--neutral-300);

  --color-disabled-bg:   var(--neutral-100);
  --color-disabled-text: var(--neutral-400);
  --color-placeholder-bg:   var(--neutral-200);
  --color-placeholder-line: var(--neutral-400);

  --color-overlay:        rgb(0 0 0 / 0.55);   /* photo heroes */
  --color-overlay-strong: rgb(0 0 0 / 0.68);
  --color-overlay-soft:   rgb(0 0 0 / 0.35);
  --color-backdrop:       rgb(0 0 0 / 0.85);   /* behind the lightbox */
  --color-on-photo-line:  var(--neutral-0);    /* outlined controls over a photo */
  --color-lightbox-control: var(--neutral-300); /* lightbox arrows, counter, close (grey, user 2026-10-31) */

  /* ---------- Typography ---------- */
  /* ONE family for the whole site (single-font-family skill); role tokens are aliases */
  --font-family:  "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: var(--font-family);
  --font-display: var(--font-family);
  --font-body:    var(--font-family);
  --font-script:  var(--font-family);
  --font-mono:    var(--font-family);

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --text-2xl:  clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --text-3xl:  clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem);
  --text-4xl:  clamp(2rem, 1.4rem + 2.2vw, 3rem);

  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.65;

  --weight-regular: 400;
  --weight-bold:    700;
  --weight-black:   900;
  --weight-medium:  var(--weight-regular);   /* Lato is loaded in 400/700/900 only */
  --weight-semibold: var(--weight-bold);

  --tracking-tight: -0.01em;
  --tracking-wide:  0.04em;

  /* ---------- Spacing (4px base) ---------- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ---------- Layout ---------- */
  --container-max:     1140px;
  --container-narrow:  860px;
  --container-gutter:  var(--space-4);
  --section-padding-y: clamp(var(--space-12), 7vw, var(--space-20));
  --grid-gap:          var(--space-6);
  --gallery-gap:       var(--space-2);
  --topbar-height:     64px;
  --header-height:     56px;
  --hero-min-height:   min(78vh, 720px);
  --page-hero-min-height: 340px;
  --project-hero-min-height: min(70vh, 560px);
  --logo-height:       44px;
  --logo-height-footer: 56px;
  --card-media-ratio:  3 / 2;
  --sidebar-width:     320px;
  --dropdown-width:    260px;
  --review-card-width: min(100%, 520px);
  --measure:           72ch;
  --hero-lead-max:     34rem;
  --nav-panel-width:   360px;
  --star-size:         1.125rem;
  --star-size-lg:      1.5rem;
  --lightbox-width:    90vw;
  --lightbox-height:   90vh;

  /* ---------- Borders & radii ---------- */
  --border-width: 1px;
  --border-width-thick: 3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   20px;
  --radius-full: 9999px;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.08);
  --shadow-md: 0 4px 16px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 14px 36px rgb(0 0 0 / 0.16);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-focus) 45%, transparent);
  --shadow-text: 0 1px 12px rgb(0 0 0 / 0.45);
  --shadow-soft: 0 24px 80px rgb(0 0 0 / 0.22);   /* lightbox: barely there */

  /* ---------- Motion ---------- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 350ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* ---------- Z-index ---------- */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;

  /* ---------- Components ---------- */
  --control-height-sm: 36px;
  --control-height-md: 44px;
  --control-height-lg: 52px;
  --control-padding-x: var(--space-4);
  --control-radius:    var(--radius-md);
  --control-border:    var(--border-width) solid var(--color-border-strong);

  --btn-radius:   var(--radius-full);   /* pill buttons, as in the reference */
  --btn-weight:   var(--weight-bold);
  --input-radius: var(--control-radius);
  --card-radius:  var(--radius-lg);
  --card-padding: var(--space-5);
  --card-shadow:  var(--shadow-md);
  --card-accent-border: var(--border-width-thick) solid var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}