/*
 * templates.css
 * ==============
 * CSS custom properties for the 16 site templates (includes/templates.php).
 * Palette/radius/spacing values are drawn directly from each template's real
 * reference design so every OTHER section (About, tiles, steps, FAQ,
 * contact, CTA, footer — generator/pages.php's shared, field-complete
 * renderers) reads as genuinely "that template's" look, not a generic reskin.
 *
 * Loaded BEFORE themes.css in includes/header.php, so a colour theme
 * (assets/css/themes.css, html[data-colour="tXX"]) set afterward always wins
 * the cascade for colour vars — template is the base layer, colour overrides.
 *
 * Hero markup is NOT driven by these vars — generator/pages.php's
 * render_hero() switches directly on the template code and emits each
 * template's own bespoke hero HTML/CSS, baked server-side (see that file's
 * own comment on why: generator/build.php strips every
 * html[data-colour|data-template] selector block, including this file's, out
 * of a built site's copy of style.css — only real HTML/PHP branching
 * survives the build).
 */

/* ── tp01 Meridian — Law & Professional ───────────────────────────────────── */
html[data-template="tp01"] {
  --font-heading: 'EB Garamond', Georgia, serif;
  --font-body:    'Archivo', system-ui, sans-serif;
  --font-size-base: 1rem;
  --radius-sm: 0px; --radius-md: 2px; --radius-lg: 4px; --radius-xl: 6px; --radius-btn: 0px;
  --section-py: 88px;

  --color-primary:       #101828;
  --color-primary-light: #344054;
  --color-primary-dark:  #0A0F19;
  --color-accent:        #A67C2E;
  --color-bg:            #FFFFFF;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #EAECF0;
  --color-border:        #E4E7EC;
  --color-text:          #101828;
  --color-text-muted:    #475467;
  --color-hero-bg:       #101828;
  --color-hero-text:     #FFFFFF;
  --color-nav-bg:        #FFFFFF;
  --color-nav-text:      #101828;
  --color-btn-bg:        #101828;
  --color-btn-text:      #FFFFFF;
  --color-btn-hover:     #26314A;
}

/* ── tp02 Fold & Grain — Bakery & Café ─────────────────────────────────────── */
html[data-template="tp02"] {
  --font-heading: 'DM Serif Display', Georgia, serif;
  --font-body:    'Karla', system-ui, sans-serif;
  --font-size-base: 1rem;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-btn: 999px;
  --section-py: 90px;

  --color-primary:       #2A1E17;
  --color-primary-light: #4A382C;
  --color-primary-dark:  #1A120D;
  --color-accent:        #C2542A;
  --color-bg:            #FFF6EC;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #E8D9C6;
  --color-border:        #E8D9C6;
  --color-text:          #2A1E17;
  --color-text-muted:    #6B5546;
  --color-hero-bg:       #2A1E17;
  --color-hero-text:     #FFF6EC;
  --color-nav-bg:        #FFF6EC;
  --color-nav-text:      #2A1E17;
  --color-btn-bg:        #2A1E17;
  --color-btn-text:      #FFF6EC;
  --color-btn-hover:     #4A382C;
}

/* ── tp03 Kestrel — Trades & Emergency ─────────────────────────────────────── */
html[data-template="tp03"] {
  --font-heading: 'Archivo Black', sans-serif;
  --font-body:    'Barlow', system-ui, sans-serif;
  --font-size-base: 1rem;
  --radius-sm: 0px; --radius-md: 0px; --radius-lg: 2px; --radius-xl: 4px; --radius-btn: 0px;
  --section-py: 84px;

  --color-primary:       #1C1C1A;
  --color-primary-light: #35352F;
  --color-primary-dark:  #000000;
  --color-accent:        #F5D000;
  --color-bg:            #F2F2EF;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #DCDCD6;
  --color-border:        #DCDCD6;
  --color-text:          #1C1C1A;
  --color-text-muted:    #5A5A54;
  --color-hero-bg:       #F5D000;
  --color-hero-text:     #1C1C1A;
  --color-nav-bg:        #1C1C1A;
  --color-nav-text:      #F5D000;
  --color-btn-bg:        #F5D000;
  --color-btn-text:      #1C1C1A;
  --color-btn-hover:     #DBB800;
}

/* ── tp04 Halcyon — Medical & Dental ───────────────────────────────────────── */
html[data-template="tp04"] {
  --font-heading: 'Outfit', system-ui, sans-serif;
  --font-body:    'Outfit', system-ui, sans-serif;
  --font-size-base: 1rem;
  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-btn: 999px;
  --section-py: 92px;

  --color-primary:       #12303B;
  --color-primary-light: #1D4B5B;
  --color-primary-dark:  #0A1E25;
  --color-accent:        #2E7D9A;
  --color-bg:            #FFFFFF;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #EDF3F7;
  --color-border:        #C9DAE3;
  --color-text:          #12303B;
  --color-text-muted:    #3E6274;
  --color-hero-bg:       #EDF3F7;
  --color-hero-text:     #12303B;
  --color-nav-bg:        #EDF3F7;
  --color-nav-text:      #12303B;
  --color-btn-bg:        #12303B;
  --color-btn-text:      #FFFFFF;
  --color-btn-hover:     #0D232B;
}

/* ── tp05 Ironworks — Gym & Fitness ────────────────────────────────────────── */
html[data-template="tp05"] {
  --font-heading: 'Anton', sans-serif;
  --font-body:    'Space Mono', monospace;
  --font-size-base: 1rem;
  --radius-sm: 0px; --radius-md: 0px; --radius-lg: 2px; --radius-xl: 4px; --radius-btn: 0px;
  --section-py: 84px;

  --color-primary:       #0A0A0A;
  --color-primary-light: #1A1A1A;
  --color-primary-dark:  #000000;
  --color-accent:        #C8FF00;
  --color-bg:            #0A0A0A;
  --color-surface:       #111110;
  --color-surface-alt:   #161614;
  --color-border:        #262622;
  --color-text:          #F5F5F0;
  --color-text-muted:    #9A9A92;
  --color-hero-bg:       #0A0A0A;
  --color-hero-text:     #F5F5F0;
  --color-nav-bg:        #0A0A0A;
  --color-nav-text:      #F5F5F0;
  --color-btn-bg:        #C8FF00;
  --color-btn-text:      #0A0A0A;
  --color-btn-hover:     #B3E600;
}

/* ── tp06 Verdi Terrace — Property & Estates ───────────────────────────────── */
html[data-template="tp06"] {
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', system-ui, sans-serif;
  --font-size-base: 1rem;
  --radius-sm: 0px; --radius-md: 2px; --radius-lg: 4px; --radius-xl: 8px; --radius-btn: 0px;
  --section-py: 90px;

  --color-primary:       #1F3A2E;
  --color-primary-light: #2E5340;
  --color-primary-dark:  #142720;
  --color-accent:        #8C7A4E;
  --color-bg:            #F4F1EA;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #E3DDD0;
  --color-border:        #E3DDD0;
  --color-text:          #1F3A2E;
  --color-text-muted:    #4C6459;
  --color-hero-bg:       #F4F1EA;
  --color-hero-text:     #1F3A2E;
  --color-nav-bg:        #F4F1EA;
  --color-nav-text:      #1F3A2E;
  --color-btn-bg:        #1F3A2E;
  --color-btn-text:      #F4F1EA;
  --color-btn-hover:     #16291F;
}

/* ── tp07 Studio Nomi — Photography ────────────────────────────────────────── */
html[data-template="tp07"] {
  --font-heading: 'Syne', sans-serif;
  --font-body:    'Syne', sans-serif;
  --font-size-base: 1rem;
  --radius-sm: 0px; --radius-md: 4px; --radius-lg: 8px; --radius-xl: 12px; --radius-btn: 999px;
  --section-py: 90px;

  --color-primary:       #151513;
  --color-primary-light: #2B2B28;
  --color-primary-dark:  #000000;
  --color-accent:        #151513;
  --color-bg:            #FAFAF8;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #E7E7E2;
  --color-border:        #DEDED8;
  --color-text:          #151513;
  --color-text-muted:    #5C5C56;
  --color-hero-bg:       #FAFAF8;
  --color-hero-text:     #151513;
  --color-nav-bg:        #FAFAF8;
  --color-nav-text:      #151513;
  --color-btn-bg:        #151513;
  --color-btn-text:      #FAFAF8;
  --color-btn-hover:     #2B2B28;
}

/* ── tp08 Tuk & Tumble — Preschool & Kids ──────────────────────────────────── */
html[data-template="tp08"] {
  --font-heading: 'Baloo 2', sans-serif;
  --font-body:    'Baloo 2', sans-serif;
  --font-size-base: 1.02rem;
  --radius-sm: 12px; --radius-md: 20px; --radius-lg: 30px; --radius-xl: 40px; --radius-btn: 999px;
  --section-py: 84px;

  /* #2B7FD4 only gave white text 4.13:1 (fails WCAG's 4.5:1 for normal-
     sized text — several sections pair --color-primary with hardcoded
     white, e.g. the founder card and CTA section) — 8% darker clears it
     at 4.75:1 while staying visually the same bold blue. Kept identical
     to --color-hero-bg below, as originally designed. */
  --color-primary:       #2875C3;
  --color-primary-light: #4E97DD;
  --color-primary-dark:  #1C68B4;
  --color-accent:        #FF8A3D;
  --color-bg:            #FFFFFF;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #E8F2FC;
  --color-border:        #D3E5F8;
  --color-text:          #123A63;
  --color-text-muted:    #4E6B89;
  --color-hero-bg:       #2875C3;
  --color-hero-text:     #FFFFFF;
  --color-nav-bg:        #FFFFFF;
  --color-nav-text:      #123A63;
  --color-btn-bg:        #FF8A3D;
  /* White on this orange was 2.35:1 (fails WCAG's 4.5:1 for button text) —
     the dark navy body-text colour reads correctly against it instead. */
  --color-btn-text:      #123A63;
  --color-btn-hover:     #E67730;
}

/* ── tp09 Northbound — Logistics & Freight ─────────────────────────────────── */
html[data-template="tp09"] {
  --font-heading: 'Saira Condensed', sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, sans-serif;
  --font-size-base: 1rem;
  --radius-sm: 0px; --radius-md: 0px; --radius-lg: 2px; --radius-xl: 4px; --radius-btn: 0px;
  --section-py: 84px;

  --color-primary:       #0D2033;
  --color-primary-light: #1A3550;
  --color-primary-dark:  #060F19;
  --color-accent:        #F26722;
  --color-bg:            #FFFFFF;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #EEF2F6;
  --color-border:        #E4E9EE;
  --color-text:          #0D2033;
  --color-text-muted:    #5B6E81; /* darkened from #5F7386 — failed AA (4.36:1 against surface-alt), found 2026-09-10 */
  --color-hero-bg:       #EEF2F6;
  --color-hero-text:     #0D2033;
  --color-nav-bg:        #0D2033;
  --color-nav-text:      #FFFFFF;
  --color-btn-bg:        #0D2033;
  --color-btn-text:      #FFFFFF;
  --color-btn-hover:     #1A3550;
}

/* ── tp10 Cyan Ledger — Accounting & Finance ───────────────────────────────── */
html[data-template="tp10"] {
  --font-heading: 'IBM Plex Mono', monospace;
  --font-body:    'IBM Plex Sans', system-ui, sans-serif;
  --font-size-base: 1rem;
  --radius-sm: 0px; --radius-md: 0px; --radius-lg: 2px; --radius-xl: 2px; --radius-btn: 0px;
  --section-py: 84px;

  --color-primary:       #111111;
  --color-primary-light: #2E2E2E;
  --color-primary-dark:  #000000;
  --color-accent:        #0047FF;
  --color-bg:            #FFFFFF;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #F5F5F5;
  --color-border:        #E2E2E2;
  --color-text:          #111111;
  --color-text-muted:    #4A4A4A;
  --color-hero-bg:       #FFFFFF;
  --color-hero-text:     #111111;
  --color-nav-bg:        #FFFFFF;
  --color-nav-text:      #111111;
  --color-btn-bg:        #0047FF;
  --color-btn-text:      #FFFFFF;
  --color-btn-hover:     #0038CC;
}

/* ── tp11 Roots & Remedy — Wellness & Herbal ───────────────────────────────── */
html[data-template="tp11"] {
  --font-heading: 'Newsreader', Georgia, serif;
  --font-body:    'Work Sans', system-ui, sans-serif;
  --font-size-base: 1.02rem;
  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-btn: 999px;
  --section-py: 92px;

  --color-primary:       #33372C;
  --color-primary-light: #4B5140;
  --color-primary-dark:  #22251C;
  --color-accent:        #8A9377;
  --color-bg:            #F6F3ED;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #E4DED1;
  --color-border:        #E4DED1;
  --color-text:          #33372C;
  --color-text-muted:    #5D6353;
  --color-hero-bg:       #F6F3ED;
  --color-hero-text:     #33372C;
  --color-nav-bg:        #F6F3ED;
  --color-nav-text:      #33372C;
  --color-btn-bg:        #8A9377;
  /* The cream body-bg colour was only 2.91:1 on this sage green (fails
     WCAG's 4.5:1) — the darker primary-dark shade reads correctly instead. */
  --color-btn-text:      #22251C;
  --color-btn-hover:     #74805F;
}

/* ── tp12 Pulse FM — Music & Events ────────────────────────────────────────── */
html[data-template="tp12"] {
  --font-heading: 'Righteous', sans-serif;
  --font-body:    'Space Grotesk', sans-serif;
  --font-size-base: 1rem;
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-xl: 30px; --radius-btn: 999px;
  --section-py: 80px;

  --color-primary:       #3A0F14;
  --color-primary-light: #5A1A21;
  --color-primary-dark:  #240A0D;
  --color-accent:        #E8B33C;
  --color-bg:            #EFE3C8;
  --color-surface:       #FBF6EA;
  --color-surface-alt:   #F3DDAE;
  --color-border:        #DCC79C;
  --color-text:          #3A0F14;
  /* #8A5C40 was 4.47:1 on this bg — a hair under WCAG's 4.5:1. */
  --color-text-muted:    #7A4E33;
  --color-hero-bg:       #EFE3C8;
  --color-hero-text:     #3A0F14;
  --color-nav-bg:        #3A0F14;
  --color-nav-text:      #EFE3C8;
  --color-btn-bg:        #B0303A;
  --color-btn-text:      #EFE3C8;
  --color-btn-hover:     #8F2530;
}

/* ── tp13 The Daily Fix — Publishing & Blog ────────────────────────────────── */
html[data-template="tp13"] {
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Source Serif 4', Georgia, serif;
  --font-size-base: 1rem;
  --radius-sm: 0px; --radius-md: 0px; --radius-lg: 2px; --radius-xl: 4px; --radius-btn: 0px;
  --section-py: 84px;

  --color-primary:       #1A1A18;
  --color-primary-light: #322F2B;
  --color-primary-dark:  #000000;
  --color-accent:        #9C2A21;
  --color-bg:            #FCFBF7;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #F0EEE6;
  --color-border:        #D8D6CE;
  --color-text:          #1A1A18;
  --color-text-muted:    #6C6C66; /* darkened from #6E6E68 — failed AA (4.42:1 against surface-alt), found 2026-09-10 */
  --color-hero-bg:       #FCFBF7;
  --color-hero-text:     #1A1A18;
  --color-nav-bg:        #FCFBF7;
  --color-nav-text:      #1A1A18;
  --color-btn-bg:        #1A1A18;
  --color-btn-text:      #FCFBF7;
  --color-btn-hover:     #322F2B;
}

/* ── tp14 Volt Auto — Auto & EV ─────────────────────────────────────────────── */
html[data-template="tp14"] {
  --font-heading: 'Manrope', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, sans-serif;
  --font-size-base: 1rem;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 20px; --radius-btn: 10px;
  --section-py: 84px;

  --color-primary:       #0B0F14;
  --color-primary-light: #1B242E;
  --color-primary-dark:  #000000;
  --color-accent:        #22E1A1;
  --color-bg:            #0B0F14;
  --color-surface:       #111922;
  --color-surface-alt:   #12202B;
  --color-border:        #1B242E;
  --color-text:          #E8EEF5;
  --color-text-muted:    #93A3B4;
  --color-hero-bg:       #0B0F14;
  --color-hero-text:     #E8EEF5;
  --color-nav-bg:        #0B0F14;
  --color-nav-text:      #E8EEF5;
  --color-btn-bg:        #22E1A1;
  --color-btn-text:      #04140D;
  --color-btn-hover:     #1EC38C;
}

/* ── tp15 Lelapa Lodge — Tourism & Lodging ─────────────────────────────────── */
html[data-template="tp15"] {
  --font-heading: 'Marcellus', Georgia, serif;
  --font-body:    'Mulish', system-ui, sans-serif;
  --font-size-base: 1rem;
  --radius-sm: 0px; --radius-md: 2px; --radius-lg: 4px; --radius-xl: 8px; --radius-btn: 0px;
  --section-py: 92px;

  --color-primary:       #2E2A24;
  --color-primary-light: #453F36;
  --color-primary-dark:  #1D1A16;
  --color-accent:        #B07C36;
  --color-bg:            #FBF7F0;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #E7DFD1;
  --color-border:        #E7DFD1;
  --color-text:          #2E2A24;
  --color-text-muted:    #5C554A;
  --color-hero-bg:       #2E2A24;
  --color-hero-text:     #FBF7F0;
  --color-nav-bg:        #FBF7F0;
  --color-nav-text:      #2E2A24;
  --color-btn-bg:        #2E2A24;
  --color-btn-text:      #FBF7F0;
  --color-btn-hover:     #453F36;
}

/* ── tp16 Sable & Vine — Salon & Beauty ─────────────────────────────────────── */
html[data-template="tp16"] {
  --font-heading: 'Italiana', Georgia, serif;
  --font-body:    'Jost', system-ui, sans-serif;
  --font-size-base: 1rem;
  --radius-sm: 0px; --radius-md: 0px; --radius-lg: 2px; --radius-xl: 4px; --radius-btn: 0px;
  --section-py: 92px;

  --color-primary:       #241F1C;
  --color-primary-light: #3A332E;
  --color-primary-dark:  #140F0D;
  --color-accent:        #A88C6B;
  --color-bg:            #EDE9E4;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #D9D2CA;
  --color-border:        #D5CEC6;
  --color-text:          #241F1C;
  --color-text-muted:    #625954; /* darkened from #6B615B — failed AA (4.02:1 against surface-alt), found 2026-09-10 */
  --color-hero-bg:       #241F1C;
  --color-hero-text:     #EDE9E4;
  --color-nav-bg:        #EDE9E4;
  --color-nav-text:      #241F1C;
  --color-btn-bg:        #241F1C;
  --color-btn-text:      #EDE9E4;
  --color-btn-hover:     #3A332E;
}