/* Green & Co. Building Group - Design Tokens v2
   Codified from the brand board (brand/greenco-brand-board.jpg).
   Single source of truth for the website and digital surfaces.
   Fonts: Cinzel + Montserrat (Google Fonts, OFL). Self-host for production. */

/* ============================================================
   CANONICAL BRAND FACTS (copy verbatim, never paraphrase)
   Name (display):  Green & Co. Building Group
   Short name:      Green & Co.
   Formerly:        Lone Star Building Company (never surface on new assets)
   Phone:           936.404.6462   (tel:+19364046462)
   Email:           info@greenco.build
   Web:             greenco.build
   Services:        Custom Homes, Commercial, Restoration, Roofing, Mitigation
   Tagline:         Built on Integrity. Built to Last.
   Promise:         We build with integrity, restore with precision, and serve every client with excellence.
   Values:          Faith, Integrity, Excellence, Communication, Craftsmanship
   CONFIRM before build: mailing address, service-area cities (979 = Bryan / College
   Station / Brazos Valley TX), TX contractor license #, hours, social handles, warranty.
   ============================================================ */

:root {
  /* --- Palette (exact brand values, do not approximate) --- */
  --gc-black:      #0D0D0D;  /* primary dark surface; primary ink on light */
  --gc-charcoal:   #1F1F1F;  /* secondary surface, cards/panels on dark */
  --gc-grey:       #606060;  /* borders/dividers; text on LIGHT only (5.77:1) */
  --gc-offwhite:   #F5F5F5;  /* light surface; primary text on dark */
  --gc-gold:       #C8A24D;  /* accent only: mark, rules, CTAs; text ONLY on dark */

  /* --- Functional shades (derived, not new brand colors) --- */
  --gc-gold-soft:  #d9bd7e;  /* button hover/active gold */
  --gc-gold-ink:   #806A2A;  /* gold AS TEXT on light only (4.8:1); never body */
  --gc-ok:         #7fce9b;  /* UI feedback only (validation, do/don't) */
  --gc-warn:       #d98b7a;  /* UI feedback only */
  --gc-err-dark:   #F1998A;  /* error text on dark (9:1) */
  --gc-err-light:  #B3261E;  /* error text on light (6:1) */

  /* --- Semantic roles --- */
  --gc-bg-dark:        var(--gc-black);
  --gc-bg-dark-alt:    var(--gc-charcoal);
  --gc-bg-light:       var(--gc-offwhite);
  --gc-text-on-dark:   var(--gc-offwhite);
  --gc-text-on-light:  var(--gc-black);
  --gc-text-muted:     rgba(245, 245, 245, 0.62);  /* muted on dark, 6.9:1; NOT #606060 */
  --gc-accent:         var(--gc-gold);
  --gc-cta-bg:         var(--gc-gold);
  --gc-cta-text:       var(--gc-black);   /* black on gold = 8.1:1, never white */
  --gc-rule:           rgba(200, 162, 77, 0.28);
  --gc-rule-soft:      rgba(245, 245, 245, 0.10);
  --gc-focus-dark:     var(--gc-gold);
  --gc-focus-light:    var(--gc-black);

  /* --- Typography --- */
  --gc-font-serif:  'Cinzel', Georgia, 'Times New Roman', serif;      /* display + headings only */
  --gc-font-sans:   'Montserrat', system-ui, -apple-system, sans-serif; /* subheads, labels, body */
  --gc-font-script: 'Petit Formal Script', cursive;                  /* logo ampersand ONLY, not a web font in prod */

  /* Type scale (fluid, clamp min/max) */
  --gc-fs-display: clamp(2.6rem, 6vw, 5rem);
  --gc-fs-h1:      clamp(2rem, 4.5vw, 3rem);
  --gc-fs-h2:      clamp(1.6rem, 3.5vw, 2.2rem);
  --gc-fs-h3:      1.25rem;
  --gc-fs-body:    1rem;
  --gc-fs-small:   0.82rem;
  --gc-fs-label:   0.72rem;

  /* Type treatment (per-role letter-spacing) */
  --gc-tracking-display: 0.01em;
  --gc-tracking-heading: 0.02em;
  --gc-tracking-label:   0.34em;   /* uppercase Montserrat labels/eyebrows */
  --gc-tracking-wide:    0.42em;   /* BUILDING GROUP lockup */
  --gc-tracking-tagline: 0.28em;
  --gc-leading-body:     1.6;
  --gc-weight-body:      400;
  --gc-weight-label:     600;
  --gc-weight-display:   500;

  /* --- Spacing scale (4px base) --- */
  --gc-space-1: 4px;  --gc-space-2: 8px;  --gc-space-3: 12px; --gc-space-4: 16px;
  --gc-space-5: 24px; --gc-space-6: 32px; --gc-space-7: 48px; --gc-space-8: 64px;
  --gc-space-9: 96px; --gc-space-10: 128px;

  /* --- Shape + layout --- */
  --gc-radius: 2px;               /* near-square, structural, not rounded-xl */
  --gc-section-y: clamp(68px, 9vw, 96px);
  --gc-maxw: 1080px;
  --gc-gutter: 24px;
  --gc-measure: 60ch;
  --gc-target-min: 44px;          /* min interactive target */

  /* Breakpoints (reference; use in @media) --- 480 / 680 / 1024 / 1280 */

  /* --- Motion --- */
  --gc-motion-fast: 160ms;
  --gc-motion-ease: cubic-bezier(.2, .6, .2, 1);
}

/* Global floor helpers (opt-in): copy into any Green & Co. build.
   :focus-visible { outline: 2px solid var(--gc-focus-dark); outline-offset: 2px; }
   .on-light :focus-visible { outline-color: var(--gc-focus-light); }
   @media (prefers-reduced-motion: reduce) {
     *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
   } */

/* Accessibility guardrails (encoded, not just documented):
   - Gold on white = 2.2:1 -> FAILS. Never use --gc-gold for text on light.
     On light, gold is graphics/rules only; for gold-looking text use --gc-gold-ink (#806A2A, 4.8:1).
   - Gold on black = 8.1:1 -> AAA. Off-white on black = 17.8:1 -> AAA.
   - Muted text on dark = --gc-text-muted (rgba white .62), never #606060 (3.09:1, fails).
   - CTA buttons: --gc-cta-bg with --gc-cta-text (black on gold), never white text.
   - Every interactive element >= 44x44px with a visible focus-visible ring. */

/* Font loading (production: replace @import with self-hosted @font-face, font-display:swap,
   preload + subset Cinzel 400/500/600 and Montserrat 300/400/500/600/700.
   Drop Petit Formal Script from the web font set: the ampersand ships in the logo vector.
   @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap'); */