/* ==========================================================================
   PATH: /css/tokens.css
   TYPE: stylesheet
   STATUS: shared
   USES: global design tokens for color, surfaces, borders, overlays, spacing
         references, shadows, typography, and shared image variables

   PURPOSE
   This file owns the core design-token layer for the Atera Homes site.
   It defines the shared custom properties that other stylesheets consume,
   including color palette values, accent treatments, overlays, panel surfaces,
   typography stacks, container width, and shared image variables.

   KEEP IN THIS FILE
   - root-level custom properties only
   - global palette and semantic color tokens
   - shared accent, border, and surface tokens
   - reusable overlay and panel variables
   - typography stack variables
   - layout-width and general shadow tokens
   - shared image-path variables used across files

   DO NOT PUT IN THIS FILE
   - element selectors like body, h1, a, img, button
   - layout rules
   - component styling
   - page-specific overrides
   - breakpoint rules
   - one-off temporary values for a single page

   OWNERSHIP NOTES
   - If a value is reused across multiple files, it belongs here.
   - If a variable only exists to support one page-specific override, it should
     usually live with that page or component instead.
   - This file should stay declarative: token definitions only, no presentation
     rules beyond :root custom properties.
   ========================================================================== */

:root {
  /* ==========================================================================
     Core palette
     Base dark/light surfaces, primary text, muted text, and shared divider
     colors used throughout the site.
     ========================================================================== */

  --dark: #1c1917;
  --dark-2: #434341;
  --light: #f4f0ea;
  --text-dark: #1c1917;
  --text-light: #f7f3ee;
  --muted-dark: #6f675d;
  --muted-light: rgba(247, 243, 238, 0.78);
  --line-dark: rgba(34, 30, 25, 0.12);
  --line-light: rgba(247, 243, 238, 0.18);
  --band-media-max-height: 380px;

  /* ==========================================================================
     Brand accent
     Shared gold/tan accent values used for links, buttons, labels, borders,
     and emphasis across the site.
     ========================================================================== */

  --gold: #c6a46d;
  --gold-light: #d6bc92;
  --tan-hover: rgba(214, 188, 146, 0.75);
  --tan-hover-strong: #e2cfaf;
  --dark-hover: rgba(28, 25, 23, 0);

  /* ==========================================================================
     Shared button tokens
     Semantic button values consumed by the shared button layer in site.css.
     Keep these tokenized so button treatments stay reusable across hero, CTA,
     sticky actions, and future page families without hardcoded duplication.
     ========================================================================== */

  --button-border: var(--gold);
  --button-text: var(--text-light);
  --button-text-hover: var(--text-dark);
  --button-bg: transparent;
  --button-bg-hover: var(--tan-hover);
  --button-border-hover: rgba(214, 188, 146, 0.92);

  /* ==========================================================================
     Card and border accents
     Shared tan card fills and border treatments for highlighted cards and
     warm-accent surfaces.
     ========================================================================== */

  --card-tan: rgba(198, 164, 109, 0.08);
  --card-tan-strong: rgba(198, 164, 109, 0.12);
  --card-tan-border: rgba(198, 164, 109, 0.35);
  --card-tan-border-strong: rgba(198, 164, 109, 0.45);

  /* ==========================================================================
     Hero overlays
     Overlay values used to control hero-image readability and depth over the
     shared rotating hero background.
     ========================================================================== */

  --hero-overlay-strong: rgba(18, 16, 14, 0.76);
  --hero-overlay-mid: rgba(18, 16, 14, 0.42);
  --hero-overlay-soft: rgba(18, 16, 14, 0.16);
  --hero-overlay-top: rgba(13, 12, 11, 0.16);
  --hero-overlay-center: rgba(13, 12, 11, 0.08);
  --hero-overlay-bottom: rgba(13, 12, 11, 0.7);

  /* ==========================================================================
     Glass and form surfaces
     Dark translucent surfaces, field borders, placeholder color, and related
     values used in the hero lead form and other dark-overlay UI.
     ========================================================================== */

  --glass-dark: rgba(19, 17, 15, 0.58);
  --glass-dark-strong: rgba(19, 17, 15, 0.74);
  --glass-dark-soft: rgba(19, 17, 15, 0.22);
  --glass-dark-mid: rgba(19, 17, 15, 0.64);
  --glass-border-light: rgba(247, 243, 238, 0.14);
  --field-border-light: rgba(247, 243, 238, 0.12);
  --field-bg-light: rgba(255, 255, 255, 0.03);
  --placeholder-light: rgba(247, 243, 238, 0.62);
  --scroll-light: rgba(247, 243, 238, 0.72);

  /* ==========================================================================
     Gold tints and lines
     Subtle gold-tinted backgrounds and divider/border values used in dark-band
     sections, process elements, and accent outlines.
     ========================================================================== */

  --gold-tint-soft: rgba(195, 162, 124, 0.05);
  --gold-tint-mid: rgba(195, 162, 124, 0.08);
  --gold-line: rgba(195, 162, 124, 0.18);
  --gold-line-strong: rgba(195, 162, 124, 0.5);

  /* ==========================================================================
     Panels, overlays, and utility surfaces
     Shared panel, lightbox, mobile sticky, CTA, image placeholder, and quote
     values used by site shell elements and utility UI.
     ========================================================================== */

  --panel-dark: rgba(20, 19, 17, 0.98);
  --panel-shadow: 0 20px 40px rgba(0, 0, 0, 0.28);
  --lightbox-bg: rgba(17, 15, 13, 0.82);
  --lightbox-close-bg: rgba(20, 18, 16, 0.92);
  --lightbox-close-bg-hover: rgba(40, 36, 32, 0.96);
  --lightbox-image-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  --mobile-sticky-bg: rgba(24, 23, 21, 0.96);
  --cta-bg: #111;
  --image-placeholder: #d8d2ca;
  --quote-mark: rgba(34, 30, 25, 0.5);

  /* ==========================================================================
     Layout and elevation
     Shared container width and general-purpose shadow values.
     ========================================================================== */

  --content: 1380px;
  --content-wide: 1400px;
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.14);

  /* ==========================================================================
     Typography
     Shared font stacks and reusable type tokens consumed across band shells,
     CTA, FAQ, portfolio, service areas, and site-owned sections.
     ========================================================================== */

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Manrope', sans-serif;

  --type-label-size: 0.72rem;
  --type-label-size-sm: 0.68rem;
  --type-label-tracking: 0.14em;
  --type-label-tracking-wide: 0.16em;

  --type-button-size: 0.76rem;
  --type-button-size-sm: 0.72rem;
  --type-button-tracking: 0.13em;

  --type-meta-size: 0.8rem;
  --type-meta-tracking: 0.1em;

  --type-body-size: 1rem;
  --type-body-size-sm: 0.95rem;
  --type-body-line: 1.6;
  --type-body-line-loose: 1.7;

  --type-link-size: 0.76rem;
  --type-link-tracking: 0.14em;

  --type-heading-xl: clamp(2.1rem, 4vw, 3.25rem);
  --type-heading-lg: clamp(1.8rem, 2vw, 2.45rem);
  --type-heading-md: clamp(1.35rem, 2.2vw, 1.95rem);
  --type-heading-sm: clamp(1.3rem, 2vw, 1.7rem);

  --measure-copy: 40ch;
  --measure-copy-wide: 54ch;
  --measure-copy-xl: 60ch;

  /* ==========================================================================
     Shared image variables
     Global image tokens that can be swapped at runtime, including the hero
     background image variable used by shared page heroes.
     ========================================================================== */

  --hero-image: url('/assets/hero/hero-01.jpg');
}