/* ============================================================
   SCOTT FRANCIS CONSTRUCTION — Design Tokens
   LOGO-MATCHED palette: every color drawn from the SC badge —
   neutral metallic grey field (#606060), the warm taupe monogram
   (#c4bab1), white stripes, and charcoal shadows (#484848).
   Paired with an editorial serif (Newsreader) for the premium feel.
   Scottsdale, Arizona · Custom Homes · Remodel · Commercial
   ============================================================ */

/* ---- Fonts (loaded via <link> in HTML; declared here for reference)
   One typeface site-wide: Archivo (clean humanist sans).
   Headings vs body are set apart by weight and size, not a second
   font, for a consistent look on every page.                      ---- */

:root {
  /* ============ CORE PALETTE (sampled from the logo) ============ */

  /* Ink — the logo's charcoal shadow (#484848) deepened for headings */
  --ink-900: #1e1e1d;
  --ink-800: #2b2b2a;
  --ink-700: #595857;   /* logo badge grey — primary dark surface */
  --ink-600: #6a6966;

  /* Neutral stone-grey ramp — the logo field (#606060) is the spine */
  --grey-700: #4a4946;
  --grey-600: #5d5c58;  /* logo field grey */
  --grey-500: #767470;  /* muted text */
  --grey-400: #9a978f;
  --grey-300: #c2bfb8;
  --grey-200: #d8d5ce;
  --grey-150: #e4e1da;  /* light stone section */
  --grey-100: #edebe6;
  --grey-50:  #f5f4f1;  /* page tint */
  --paper:    #fafaf8;  /* near-white (logo stripe) */

  /* Taupe — the exact metallic SC monogram (#c4bab1), stepped dark
     to carry white text on the ACTION color (CTAs, links, active). */
  --accent-700: #4e4538;
  --accent-600: #635849;
  --accent-500: #7a6d5c;  /* primary — warm logo brown */
  --accent-400: #a09080;
  --accent-200: #d5cdc1;
  --accent-50:  #f0ede7;

  /* Light monogram taupe — the exact logo metal, for highlights,
     eyebrows on dark, dividers, badge fills. */
  --taupe-600: #8c8175;
  --taupe-500: #a99e91;
  --taupe-400: #c4bab1;  /* logo taupe (exact) */
  --taupe-200: #e0dad2;
  --taupe-100: #eeeae4;

  /* ============ SEMANTIC TEXT ============ */
  --fg-1: var(--ink-800);    /* primary text */
  --fg-2: var(--grey-700);   /* body */
  --fg-3: var(--grey-500);   /* muted / captions */
  --fg-on-dark:    #f1f0ed;
  --fg-on-dark-2:  #c3c1ba;
  --fg-on-dark-3:  #918e86;

  /* ============ SURFACES ============ */
  --surface-page:   var(--grey-50);
  --surface-card:   var(--paper);
  --surface-tint:   var(--grey-150);   /* alternating sections */
  --surface-dark:   var(--ink-700);
  --surface-darker: var(--ink-900);

  /* ============ BORDERS / LINES ============ */
  --line-1: #e9e7e1;   /* hairline on light */
  --line-2: #d8d5ce;   /* card border */
  --line-3: #c6c3bb;   /* stronger divider */
  --line-on-dark: rgba(255,255,255,0.12);

  /* ============ STATE / SEMANTIC ============ */
  --success: #5b7a52;
  --warning: #c08a3e;
  --danger:  #b9514a;
  --focus-ring: rgba(124,113,96,0.45);

  /* ============ TYPOGRAPHY ============
     Headings: Fraunces — a refined, premium serif.
     UI labels + body: Archivo — a clean humanist sans.
     A tasteful two-font pairing for a professional, high-end feel. */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-ui:      'Archivo', system-ui, sans-serif;
  --font-body:    'Archivo', system-ui, sans-serif;
  --font-serif:   'Fraunces', Georgia, serif;

  /* Fluid display sizes (1920 hero scale → mobile) */
  --fs-display: clamp(2.75rem, 1.5rem + 4.3vw, 5rem); /* 44 → 80 */
  --fs-h1: clamp(2.1rem, 1.4rem + 2.6vw, 3.5rem);         /* 34 → 56 */
  --fs-h2: clamp(1.65rem, 1.2rem + 1.5vw, 2.5rem);        /* 26 → 40 */
  --fs-h3: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem);       /* 20 → 26 */
  --fs-lead: clamp(1.1rem, 1rem + 0.4vw, 1.35rem);        /* 18 → 22 */
  --fs-body: 1.0625rem;   /* 17 */
  --fs-sm: 0.9375rem;     /* 15 */
  --fs-xs: 0.8125rem;     /* 13 */
  --fs-eyebrow: 0.78rem;  /* 12.5 — uppercase tracked label */

  --lh-tight: 1.06;
  --lh-snug: 1.16;
  --lh-body: 1.65;

  --tracking-eyebrow: 0.24em;  /* wide-tracked caps — editorial */
  --tracking-display: -0.012em;
  --tracking-h: -0.008em;

  /* ============ RADII ============ */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ============ SPACING (8pt base) ============ */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* ============ ELEVATION ============ */
  --shadow-xs: 0 1px 2px rgba(40,40,38,0.06);
  --shadow-sm: 0 2px 6px rgba(40,40,38,0.07), 0 1px 2px rgba(40,40,38,0.05);
  --shadow-md: 0 10px 28px rgba(40,40,38,0.09), 0 2px 6px rgba(40,40,38,0.05);
  --shadow-lg: 0 24px 52px rgba(35,35,33,0.14), 0 6px 14px rgba(35,35,33,0.07);
  --shadow-accent: 0 12px 28px rgba(86,77,64,0.24);

  /* ============ MOTION ============ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 520ms;

  --container: 1200px;
  --container-wide: 1360px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES (opt-in via .sfc-prose or utilities)
   ============================================================ */

.sfc-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-500);
}

.sfc-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  text-wrap: balance;
}

.sfc-h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tracking-h); color: var(--fg-1); text-wrap: balance; }
.sfc-h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tracking-h); color: var(--fg-1); text-wrap: balance; }
.sfc-h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.28; color: var(--fg-1); }

.sfc-lead { font-family: var(--font-body); font-size: var(--fs-lead); line-height: 1.5; color: var(--fg-2); }
.sfc-body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); }
.sfc-small { font-size: var(--fs-sm); line-height: 1.5; color: var(--fg-3); }

.sfc-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
  line-height: 1.5;
  color: var(--fg-1);
}