/*
Theme Name:  SLC-HR Child
Theme URI:   https://slc-hr.com
Description: Child theme for slc-hr.com (Shannon L. Cate — HR consulting). Built on Kadence.
             Follows the Kara Hudson Brand HQ "Web Development Standards" v1.1 ARCHITECTURE
             (parent + child + custom CSS, tokens at top, iterate on CSS not Customizer).
             Brand identity — palette, type, voice — is Shannon's own and is NOT inherited
             from any Kara Hudson property. See README.md.
Author:      Kara Hudson (build) for Shannon L. Cate
Template:    kadence
Version:     1.0.0
Text Domain: slc-hr-child
*/

/* =========================================================================
   1. DESIGN TOKENS  — single source of truth
   -------------------------------------------------------------------------
   Per the standard: if a value appears more than once on the site, it lives
   here as a variable, not a hard-coded number. The values below are NEUTRAL
   PLACEHOLDERS. Replace them with Shannon's chosen brand values in ONE place
   and they cascade everywhere. Nothing here is borrowed from KaraCooks / KHP / VCA.
   ========================================================================= */
:root {
  /* ---- Color — "Signal" direction (proposed; run by Shannon before locking) ---- */
  --slc-color-primary:    #171326;   /* Deep space — ink / headings */
  --slc-color-accent:     #E8276B;   /* Signal pink — brand / CTA */
  --slc-color-accent-hi:  #FF5C9E;   /* Bright pink — hover / active */
  --slc-color-secondary:  #6E5BF2;   /* Violet — small sci-fi accent, sparingly */
  --slc-color-ink:        #26222F;   /* body text */
  --slc-color-muted:      #6B6677;   /* secondary text */
  --slc-color-bg:         #FBFAFC;   /* page background */
  --slc-color-surface:    #F2F0F7;   /* Mist — cards / sections */
  --slc-color-surface-pink:#FCE9F1;  /* Pale pink — highlight callouts */
  --slc-color-border:     #E4E1EC;

  /* ---- Type — Space Grotesk (display) + Inter (body), via Google Fonts ---- */
  --slc-font-display: "Space Grotesk", system-ui, sans-serif;
  --slc-font-body:    "Inter", system-ui, -apple-system, sans-serif;

  /* ---- Type scale ---- */
  --slc-fs-h1:  2.75rem;
  --slc-fs-h2:  2rem;
  --slc-fs-h3:  1.5rem;
  --slc-fs-body: 1.0625rem;
  --slc-fs-small: 0.875rem;
  --slc-lh-tight: 1.2;
  --slc-lh-body: 1.65;
  --slc-ls-display: 0.01em;

  /* ---- Spacing scale ---- */
  --slc-space-xs: 0.5rem;
  --slc-space-sm: 1rem;
  --slc-space-md: 2rem;
  --slc-space-lg: 4rem;
  --slc-space-xl: 6rem;

  /* ---- Layout & misc ---- */
  --slc-content-width: 1100px;
  --slc-radius: 6px;
  --slc-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* =========================================================================
   2. GLOBAL TYPOGRAPHY
   ========================================================================= */
body {
  font-family: var(--slc-font-body);
  font-size: var(--slc-fs-body);
  line-height: var(--slc-lh-body);
  color: var(--slc-color-ink);
  background: var(--slc-color-bg);
}
h1, h2, h3, h4 {
  font-family: var(--slc-font-display);
  line-height: var(--slc-lh-tight);
  letter-spacing: var(--slc-ls-display);
  color: var(--slc-color-primary);
}
h1 { font-size: var(--slc-fs-h1); }
h2 { font-size: var(--slc-fs-h2); }
h3 { font-size: var(--slc-fs-h3); }
a { color: var(--slc-color-accent); }
a:hover { text-decoration: underline; }

/* =========================================================================
   3. COMPONENTS  (buttons, cards, forms, nav)
   Fill in as pages are rebuilt in Kadence Blocks. Examples below.
   ========================================================================= */
.button, .wp-block-button__link {
  background: var(--slc-color-accent);
  color: #fff;
  border-radius: var(--slc-radius);
  padding: var(--slc-space-xs) var(--slc-space-md);
}
.button:hover, .wp-block-button__link:hover {
  background: var(--slc-color-accent-hi);
}

/* =========================================================================
   4. PAGE-SPECIFIC OVERRIDES  (home, services, about, contact, etc.)
   Use the page-slug body classes added in functions.php, e.g. .page-services
   ========================================================================= */

/* =========================================================================
   5. RESPONSIVE & PRINT
   ========================================================================= */
@media (max-width: 768px) {
  :root { --slc-fs-h1: 2rem; --slc-fs-h2: 1.5rem; }
}
@media print {
  .site-header, .site-footer { display: none; }
}