/* ============================================================
   HARRIS HOUSE — DESIGN TOKENS  v2.0
   Expanded palette — June 2026

   Light mode:  Warm Ivory / Blush Peach / Sepia Brown
   Dark mode:   Wedgwood Blue (minimal use — nav & footer only)

   BRAND GOLD #CDB278 is RESERVED for:
     logo, monogram, ornaments, gold CTA buttons.
   Do NOT use it for body text, links, or section eyebrows.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Lora:ital,wght@0,400;0,500;1,400;1,500&family=Work+Sans:wght@300;400;500;600&display=swap');

/* ---- Type Scale ---- */
:root {
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);
  --text-hero: clamp(3rem,     0.5rem  + 7vw,    8rem);
}

/* ---- Spacing (4px base) ---- */
:root {
  --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;
  --space-32: 8rem;
}

/* ---- Radius & Transitions ---- */
:root {
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-card: 16px;   /* softened card corners site-wide */
  --radius-full: 9999px;
  --transition:  180ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Content Widths ---- */
:root {
  --content-narrow:  640px;
  --content-default: 960px;
  --content-wide:    1200px;
}

/* ---- Fonts ---- */
:root {
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body:    'Work Sans', 'Helvetica Neue', sans-serif;
  --font-accent:  'Lora', 'Georgia', serif; /* softer serif for subheadings */
}


/* ============================================================
   LIGHT MODE — Warm Ivory / Blush Peach / Sepia Brown
   Default (no data-theme attr needed for light mode)
   ============================================================ */
:root,
[data-theme='light'] {

  /* ----------------------------------------------------------
     BACKGROUNDS
     Graduated warm range — use in this order top→depth:
       bg  →  surface  →  surface-2  →  peach  →  rose-peach  →  linen
     Alternate peach sections between bg sections for rhythm
     ---------------------------------------------------------- */
  --color-bg:             #FAF6EE;  /* Warm Ivory — page base, lightest & most open  */
  --color-surface:        #EEE8D8;  /* Soft Parchment — card fills, lifted panels    */
  --color-surface-2:      #FDFAF4;  /* Rich White — innermost panels, input fields   */
  --color-peach:          #EEDEC8;  /* Muted Apricot — alternate section backgrounds */
  --color-peach-deep:     #E4CDB2;  /* Warm Apricot Deep — borders, accent fills     */
  --color-surface-offset: #E0D5C1;  /* Warm Linen — recessed panels, footer in light */

  /* ----------------------------------------------------------
     BORDERS & DIVIDERS
     ---------------------------------------------------------- */
  --color-divider:        #E0D5C1;  /* Warm Linen — hairline rules                  */
  --color-border:         #C4BBA8;  /* Warm Grey — card outlines, input borders      */
  --color-border-light:   #E8E4DC;  /* Light Grey — subtle inner dividers on ivory   */

  /* ----------------------------------------------------------
     TEXT
     Replaces old sepia-brown body + orange eyebrows
     ---------------------------------------------------------- */
  --color-text:           #1A1410;  /* Near Black — primary body text                */
  --color-text-muted:     #9C8264;  /* Warm Taupe — captions, labels, secondary copy */
  --color-text-faint:     #B8A88A;  /* Stone — placeholder, faint annotations        */
  --color-text-inverse:   #FDFAF4;  /* Rich White — text on dark bands               */
  --color-text-heading:   #1A1410;  /* Near Black — all headings                     */

  /* REPLACES bronze-orange (#8c6e28, #7a5c28, #2c2010, rgba(100,80,40,...))
     Use Sepia Brown for: links, section eyebrow labels, highlighted text,
     icon fills, blockquote marks, scripture reference labels              */
  --color-accent-text:    #6B4C35;  /* Sepia Brown — eyebrows, links, highlights     */
  --color-accent-hover:   #4E3525;  /* Deeper sepia — link hover                     */

  /* ----------------------------------------------------------
     BRAND GOLD  — RESERVED: logo / monogram / ornaments / gold buttons ONLY
     ---------------------------------------------------------- */
  --color-gold:           #CDB278;  /* Metallic Gold — brand elements only           */
  --color-gold-light:     #DEC898;  /* Soft Gold — ornament glows, hover tints       */
  --color-gold-hover:     #A8904E;  /* Gold Hover — pressed/active gold buttons      */

  /* ----------------------------------------------------------
     PRIMARY / INTERACTIVE
     Sky Blue for links and interactive elements on light backgrounds.
     Wedgwood Blue only where a stronger brand color is needed.
     ---------------------------------------------------------- */
  --color-primary:        #98BCC8;  /* Dusty Teal — links, focus rings, icon accents */
  --color-primary-strong: #3A5274;  /* Wedgwood Blue — strong interactive, nav links */
  --color-primary-hover:  #81AABB;  /* Dusty Teal hover                              */

  /* ----------------------------------------------------------
     DARK BANDS  — MINIMIZE USE
     Reserve for: site header/nav, site footer ONLY.
     Replace all interior dark bands with --color-peach or
     --color-surface-offset instead.
     ---------------------------------------------------------- */
  --color-dark-band:      #3A5274;  /* Wedgwood Blue — nav + footer backgrounds      */
  --color-dark-surface:   #2e4260;  /* Deeper Wedgwood — footer base, pressed states */
  --color-dark-navy:      #243148;  /* Deep Navy — absolute bottom (footer base)     */
  --color-dark-text:      #FDFAF4;  /* Rich White — all text on dark bands           */
  --color-dark-text-muted:#98BCC8;  /* Dusty Teal — muted text / captions on dark band */
  --color-dark-gold:      #CDB278;  /* Metallic Gold — on dark bands (brand only)    */

  /* ----------------------------------------------------------
     SHADOWS
     ---------------------------------------------------------- */
  --shadow-sm:  0 1px 3px  rgba(26, 20, 16, 0.07);
  --shadow-md:  0 4px 16px rgba(26, 20, 16, 0.09);
  --shadow-lg:  0 12px 40px rgba(26, 20, 16, 0.12);
  --shadow-card: 0 2px 12px rgba(26, 20, 16, 0.08), 0 1px 3px rgba(26, 20, 16, 0.05);
}


/* ============================================================
   DARK MODE — Wedgwood Blue
   Applied when data-theme="dark" or via system preference.
   Dark mode is largely for the nav/footer aesthetic — most
   interior sections should still render warm even in dark mode.
   ============================================================ */
[data-theme='dark'] {

  /* Backgrounds */
  --color-bg:             #3A5274;  /* Wedgwood Blue — page base                     */
  --color-surface:        #435F82;  /* Card surfaces                                 */
  --color-surface-2:      #4E6D93;  /* Raised surfaces, inner panels                 */
  --color-peach:          #3D5878;  /* Muted blue-grey replaces peach in dark mode   */
  --color-peach-deep:     #344F6E;  /* Deeper muted blue-grey                        */
  --color-surface-offset: #2E4260;  /* Recessed / footer                             */

  /* Borders & Dividers */
  --color-divider:        #4A6882;
  --color-border:         #5A789A;
  --color-border-light:   #405E7C;

  /* Text */
  --color-text:           #EEF2F8;  /* Near-white — primary body text                */
  --color-text-muted:     #B0C4DC;  /* Muted blue-white — captions, labels           */
  --color-text-faint:     #81AABB;  /* Dusty Teal — faint annotations                */
  --color-text-inverse:   #3A5274;  /* Wedgwood — text on light elements             */
  --color-text-heading:   #EEF2F8;

  /* Accent text — Sepia doesn't work on dark; use Sky Blue instead */
  --color-accent-text:    #98BCC8;  /* Sky Blue — replaces Sepia Brown on dark bg    */
  --color-accent-hover:   #C2D8EA;  /* Lighter Sky Blue — hover                      */

  /* Brand Gold — unchanged */
  --color-gold:           #CDB278;
  --color-gold-light:     #DEC898;
  --color-gold-hover:     #A8904E;

  /* Primary / Interactive */
  --color-primary:        #81AABB;  /* Dusty Teal hover — links, focus rings         */
  --color-primary-strong: #98BCC8;  /* Dusty Teal — stronger interactive             */
  --color-primary-hover:  #98BCC8;  /* Hover state                                   */

  /* Dark Bands — same in dark mode (nav/footer) */
  --color-dark-band:      #2E4260;
  --color-dark-surface:   #3A5274;
  --color-dark-navy:      #1E2E42;
  --color-dark-text:      #EEF2F8;
  --color-dark-text-muted:#98BCC8;
  --color-dark-gold:      #CDB278;

  /* Shadows */
  --shadow-sm:  0 1px 3px  rgba(0, 0, 0, 0.25);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg:  0 12px 40px rgba(0, 0, 0, 0.50);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.20);
}

/* System preference auto-detect */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:             #3A5274;
    --color-surface:        #435F82;
    --color-surface-2:      #4E6D93;
    --color-peach:          #3D5878;
    --color-peach-deep:     #344F6E;
    --color-surface-offset: #2E4260;
    --color-divider:        #4A6882;
    --color-border:         #5A789A;
    --color-border-light:   #405E7C;
    --color-text:           #EEF2F8;
    --color-text-muted:     #B0C4DC;
    --color-text-faint:     #81AABB;
    --color-text-inverse:   #3A5274;
    --color-text-heading:   #EEF2F8;
    --color-accent-text:    #98BCC8;
    --color-accent-hover:   #C2D8EA;
    --color-gold:           #CDB278;
    --color-gold-light:     #DEC898;
    --color-gold-hover:     #A8904E;
    --color-primary:        #81AABB;
    --color-primary-strong: #98BCC8;
    --color-primary-hover:  #98BCC8;
    --color-dark-band:      #2E4260;
    --color-dark-surface:   #3A5274;
    --color-dark-navy:      #1E2E42;
    --color-dark-text:      #EEF2F8;
    --color-dark-text-muted:#98BCC8;
    --color-dark-gold:      #CDB278;
    --shadow-sm:  0 1px 3px  rgba(0,0,0,0.25);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.35);
    --shadow-lg:  0 12px 40px rgba(0,0,0,0.50);
    --shadow-card: 0 2px 12px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.20);
  }
}