/*
 * Pivotly — global.css
 * Design token system: all values as CSS custom properties.
 * NEVER hardcode colors, font sizes, spacing, or breakpoints
 * anywhere in the theme. Always reference a token from this file.
 *
 * Structure:
 *   1. Google Fonts import
 *   2. Color tokens
 *   3. Coach accent overrides
 *   3b. Palette preview modes
 *   4. Typography tokens
 *   5. Spacing scale
 *   6. Layout tokens
 *   7. Border & radius tokens
 *   8. Shadow tokens
 *   9. Transition tokens
 *  10. Z-index scale
 *  11. Base reset & root styles
 */


/* ============================================================
   1. GOOGLE FONTS
   Playfair Display — headings (serif, authoritative)
   Inter           — body (clean, readable)
   ============================================================ */

/* Loaded via wp_enqueue_style in functions.php with preconnect hints */


/* ============================================================
   2. COLOR TOKENS
   All colors live here. Downstream CSS uses var(--color-*)
   never hex values directly.
   ============================================================ */

:root {

  /* Palette preview helpers:
     add ?palette=pivotly, ?palette=forest, ?palette=legacy,
     ?palette=plum, ?palette=ocean, ?palette=ember, or ?palette=sage
     to any frontend URL to compare alternate token sets. */

  /* --- Brand core --- */
  --color-primary:          #1B2E4B;   /* Deep navy — headings, nav, footer bg */
  --color-primary-hover:    #2E4A6B;   /* Mid navy — hover states on primary elements */
  --color-primary-light:    #3D6491;   /* Lighter navy — borders on dark bg, muted text on dark */
  --color-primary-muted:    rgba(27, 46, 75, 0.08); /* Transparent navy — subtle bg tints */

  --color-accent:           #C8A96E;   /* Warm gold — CTAs, links, pull quote borders, active states */
  --color-accent-hover:     #B8924F;   /* Darker gold — hover on gold elements */
  --color-accent-light:     #E8D9BC;   /* Pale gold — subtle highlights, tag backgrounds */
  --color-accent-muted:     rgba(200, 169, 110, 0.15); /* Transparent gold — section tints */

  /* --- Backgrounds --- */
  --color-bg:               #F9F7F4;   /* Warm off-white — page background */
  --color-bg-alt:           #F2EEE8;   /* Slightly warmer — alternating sections */
  --color-bg-dark:          #1B2E4B;   /* Dark sections — footer, hero variants */
  --color-bg-card:          #FFFFFF;   /* Card surfaces — testimonials, service cards */
  --color-bg-overlay:       rgba(27, 46, 75, 0.72); /* Modal / image overlays */

  /* --- Text --- */
  --color-text:             #4A3728;   /* Warm dark brown — body copy (not pure black) */
  --color-text-muted:       #7A6A5A;   /* Mid brown — captions, meta, secondary info */
  --color-text-light:       var(--color-text-muted); /* Legacy alias for older component rules */
  --color-text-faint:       #A89880;   /* Light brown — placeholders, disabled */
  --color-text-inverse:     #F9F7F4;   /* On dark backgrounds */
  --color-text-inverse-muted: rgba(249, 247, 244, 0.65); /* Muted text on dark bg */
  --color-text-inverse-dim:   rgba(255, 255, 255, 0.55); /* Very muted on dark — subordinate nav links */
  --color-text-accent:      #C8A96E;   /* Gold text — links, highlights on dark bg */

  /* --- Pure white --- */
  --color-white:            #FFFFFF;   /* Pure white — button text on filled backgrounds */

  /* --- Borders --- */
  --color-border:           #E8E3DA;   /* Default border — cards, dividers */
  --color-border-strong:    #C8BFB0;   /* Emphasis border — active states, focus rings */
  --color-border-dark:      rgba(255, 255, 255, 0.12); /* Borders on dark backgrounds */

  /* --- Semantic / UI states --- */
  --color-success:          #2D6A4F;
  --color-warning:          #B5640A;
  --color-error:            #8B1A1A;
  --color-info:             #1B4E7A;
  --color-danger-text:      #FF6B6B;
  --color-danger-soft:      rgba(255, 107, 107, 0.15);
  --color-danger-border:    rgba(255, 107, 107, 0.30);

  /* --- Social / external --- */
  --color-linkedin:         #0A66C2;

  /* --- Palette-aware overlays & dark-surface helpers --- */
  --color-surface-dark-hover:         rgba(255, 255, 255, 0.12);
  --color-surface-dark-border:        rgba(255, 255, 255, 0.08);
  --color-surface-dark-border-strong: rgba(255, 255, 255, 0.60);
  --color-surface-dark-field:         rgba(255, 255, 255, 0.08);
  --color-surface-dark-field-border:  rgba(255, 255, 255, 0.15);
  --color-surface-dark-card:          rgba(255, 255, 255, 0.10);
  --color-surface-dark-dot:           rgba(255, 255, 255, 0.25);
  --color-surface-dark-placeholder:   rgba(255, 255, 255, 0.05);
  --color-surface-dark-ghost:          rgba(255, 255, 255, 0.20);  /* faint visible placeholder on dark */
  --color-surface-dark-gradient-end:   rgba(255, 255, 255, 0.02);  /* gradient terminal on dark surfaces */
  --color-surface-dark-bg-tint:        rgba(249, 247, 244, 0.08);  /* bg-tinted panel/badge on dark */
  --color-surface-dark-bg-tint-strong: rgba(249, 247, 244, 0.16);  /* stronger bg-tint — gradient start */
  --color-surface-dark-bg-tint-faint:  rgba(249, 247, 244, 0.03);  /* near-transparent bg-tint — gradient end */
  --color-media-overlay-soft:         rgba(27, 46, 75, 0.35);
  --color-media-overlay:              rgba(27, 46, 75, 0.45);
  --color-hero-photo-overlay-1:       rgba(27, 46, 75, 0.92);  /* photo hero gradient — top */
  --color-hero-photo-overlay-2:       rgba(27, 46, 75, 0.68);
  --color-hero-photo-overlay-3:       rgba(27, 46, 75, 0.48);  /* contrast floor — never lighter than this through the text zone */
  --color-hero-photo-overlay-4:       rgba(27, 46, 75, 0.15);  /* clearest point — no text sits here */
  --color-hero-photo-overlay-5:       rgba(27, 46, 75, 0.70);  /* bottom edge finish */
  --color-watermark-on-dark:          rgba(255, 255, 255, 0.03);
  --color-watermark-on-light:         rgba(27, 46, 75, 0.05);
  --color-accent-soft:                rgba(200, 169, 110, 0.10);
  --color-accent-soft-strong:         rgba(200, 169, 110, 0.15);
  --color-accent-border:              rgba(200, 169, 110, 0.30);
  --color-accent-border-strong:       rgba(200, 169, 110, 0.40);
}


/* ============================================================
   3. COACH ACCENT OVERRIDES
   Each coach gets their own --color-accent applied via a
   body class: body.coach-argo, body.coach-mari, etc.
   This single override propagates through all components
   that reference var(--color-accent) — buttons, links,
   pull quotes, active nav, tag borders — everything.

   To add a new coach: add one rule here + set the body
   class in the coach page template.
   ============================================================ */

body.coach-argo {
  --color-accent:       #C8A96E;  /* Warm gold */
  --color-accent-hover: #B8924F;
  --color-accent-light: #E8D9BC;
  --color-accent-muted: rgba(200, 169, 110, 0.15);
  --color-text-accent:  #C8A96E;
  --color-accent-soft:  rgba(200, 169, 110, 0.10);
  --color-accent-soft-strong: rgba(200, 169, 110, 0.15);
  --color-accent-border: rgba(200, 169, 110, 0.30);
  --color-accent-border-strong: rgba(200, 169, 110, 0.40);
}

body.coach-mari {
  --color-accent:       #7A9E87;  /* Sage green — calm, nature */
  --color-accent-hover: #5F8470;
  --color-accent-light: #C8DACD;
  --color-accent-muted: rgba(122, 158, 135, 0.15);
  --color-text-accent:  #7A9E87;
  --color-accent-soft:  rgba(122, 158, 135, 0.10);
  --color-accent-soft-strong: rgba(122, 158, 135, 0.15);
  --color-accent-border: rgba(122, 158, 135, 0.30);
  --color-accent-border-strong: rgba(122, 158, 135, 0.40);
}

body.coach-ilona {
  --color-accent:       #8B7BA8;  /* Muted violet — growth, transformation */
  --color-accent-hover: #72639A;
  --color-accent-light: #D4CEDE;
  --color-accent-muted: rgba(139, 123, 168, 0.15);
  --color-text-accent:  #8B7BA8;
  --color-accent-soft:  rgba(139, 123, 168, 0.10);
  --color-accent-soft-strong: rgba(139, 123, 168, 0.15);
  --color-accent-border: rgba(139, 123, 168, 0.30);
  --color-accent-border-strong: rgba(139, 123, 168, 0.40);
}

body.coach-allar {
  --color-accent:       #C0714A;  /* Terracotta — energy, sport, drive */
  --color-accent-hover: #A85A35;
  --color-accent-light: #E8C4B0;
  --color-accent-muted: rgba(192, 113, 74, 0.15);
  --color-text-accent:  #C0714A;
  --color-accent-soft:  rgba(192, 113, 74, 0.10);
  --color-accent-soft-strong: rgba(192, 113, 74, 0.15);
  --color-accent-border: rgba(192, 113, 74, 0.30);
  --color-accent-border-strong: rgba(192, 113, 74, 0.40);
}

/* Placeholder for future coaches — copy and rename */
body.coach-new {
  --color-accent:       #4A7FA5;  /* Steel blue */
  --color-accent-hover: #356589;
  --color-accent-light: #B8D0E0;
  --color-accent-muted: rgba(74, 127, 165, 0.15);
  --color-text-accent:  #4A7FA5;
  --color-accent-soft:  rgba(74, 127, 165, 0.10);
  --color-accent-soft-strong: rgba(74, 127, 165, 0.15);
  --color-accent-border: rgba(74, 127, 165, 0.30);
  --color-accent-border-strong: rgba(74, 127, 165, 0.40);
}


/* ============================================================
   4. TYPOGRAPHY TOKENS
   ============================================================ */

:root {

  /* --- Font families --- */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  /* --- Type scale (mobile-first, desktop in media queries below) ---
     Named by role, not size. Easier to reason about semantically. */
  --text-2xs:  0.625rem;   /* 10px — micro labels */
  --text-xs:   0.75rem;    /* 12px — labels, tags, legal */
  --text-sm:   0.875rem;   /* 14px — captions, meta, nav items */
  --text-base: 1rem;       /* 16px — default body */
  --text-md:   1.125rem;   /* 18px — article body, lead text */
  --text-lg:   1.25rem;    /* 20px — large body, subheadings */
  --text-xl:   1.5rem;     /* 24px — H3, section labels */
  --text-2xl:  clamp(1.875rem, 0.68vw + 1.739rem, 2.25rem);   /* 30→36px — H2 */
  --text-3xl:  clamp(2.25rem,  0.68vw + 2.114rem, 2.625rem);  /* 36→42px — section headings */
  --text-4xl:  clamp(2.75rem,  1.36vw + 2.477rem, 3.5rem);    /* 44→56px — H1 */
  --text-5xl:  clamp(3.5rem,   1.82vw + 3.136rem, 4.5rem);    /* 56→72px — hero H1 */
  --text-6xl:  clamp(4.5rem,   1.82vw + 4.136rem, 5.5rem);    /* 72→88px — hero display */

  /* --- Font weights --- */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* --- Line heights --- */
  --leading-tight:   1.2;   /* Headings */
  --leading-snug:    1.35;  /* Subheadings, large text */
  --leading-normal:  1.6;   /* UI text, nav, labels */
  --leading-relaxed: 1.75;  /* Body copy */
  --leading-loose:   1.9;   /* Long-form article text */
  --leading-prose:   1.8;   /* Blog post body — .post-content */

  /* --- Letter spacing --- */
  --tracking-tight:  -0.02em;  /* Large display headings */
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;  /* Small caps, labels */
  --tracking-wider:   0.08em;  /* Uppercase tags */

  /* --- Reading width constraint for long-form content --- */
  --reading-width: 68ch;   /* Optimal for Estonian long words */
}


/* ============================================================
   5. SPACING SCALE
   4px base unit. Use these tokens for all margin/padding.
   ============================================================ */

:root {
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

}


/* ============================================================
   6. LAYOUT TOKENS
   ============================================================ */

:root {
  /* --- Container widths --- */
  --container-sm:   640px;   /* Narrow — forms, blog single content */
  --container-md:   768px;   /* Medium — single column content */
  --container-lg:  1024px;   /* Standard — most pages */
  --container-xl:  1200px;   /* Wide — homepage, marketing sections */
  --container-2xl: 1400px;   /* Max — full bleed with padding */

  /* --- Content column padding (horizontal) --- */
  --container-padding-x-mobile: var(--space-5);    /* 20px */
  --container-padding-x:        var(--space-8);    /* 32px */
  --container-padding-x-wide:   var(--space-12);   /* 48px */

  /* --- Nav height (for sticky offset calculations) --- */
  --nav-height-mobile: 64px;
  --nav-height:        72px;

  /* --- Nav component sizing --- */
  --nav-logo-height:       36px;
  --nav-toggle-size:       44px;
  --nav-toggle-bar-gap:     5px;
  --nav-toggle-bar-width:  22px;
  --nav-toggle-bar-height:  2px;
  --nav-toggle-bar-radius:  2px;
  --nav-toggle-bar-offset:  7px;

  /* --- Blog layout --- */
  --blog-sidebar-width: 280px;
  --blog-content-width: calc(var(--container-xl) - var(--blog-sidebar-width) - var(--space-12));

  /* --- Component sizes --- */
  --avatar-size-sm: 44px;   /* author / coach avatar */
  --icon-size-md:   48px;   /* icon container (service card) */
  --icon-size-sm:   24px;   /* icon within container */
}


/* ============================================================
   7. BORDER & RADIUS TOKENS
   ============================================================ */

:root {
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;  /* Pills, avatars */

  --border-width:       1px;
  --border-width-thick: 2px;
}


/* ============================================================
   8. SHADOW TOKENS
   Warm-tinted shadows (not cold grey) to match the palette.
   ============================================================ */

:root {
  --shadow-sm:  0 1px 3px rgba(74, 55, 40, 0.08);
  --shadow-md:  0 4px 12px rgba(74, 55, 40, 0.10);
  --shadow-lg:  0 8px 24px rgba(74, 55, 40, 0.12);
  --shadow-xl:  0 16px 48px rgba(74, 55, 40, 0.14);
  --shadow-card: 0 2px 8px rgba(74, 55, 40, 0.08), 0 0 0 1px rgba(74, 55, 40, 0.04);

  /* Focus ring — used on all interactive elements */
  --focus-ring: 0 0 0 3px rgba(200, 169, 110, 0.40);
}


/* ============================================================
   9. TRANSITION TOKENS
   ============================================================ */

:root {
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower:    600ms;
  --duration-animation: 800ms;   /* scroll-entrance / fade-in animations */

  /* Shorthand tokens for the most common transitions */
  --transition-color:     color var(--duration-fast) var(--ease-default),
                          background-color var(--duration-fast) var(--ease-default),
                          border-color var(--duration-fast) var(--ease-default);
  --transition-transform: transform var(--duration-base) var(--ease-out);
  --transition-opacity:   opacity var(--duration-base) var(--ease-default);
  --transition-all:       all var(--duration-base) var(--ease-default);
}


/* ============================================================
   10. Z-INDEX SCALE
   Named layers — never use raw numbers in component CSS.
   ============================================================ */

:root {
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;    /* Cards on hover */
  --z-dropdown: 100;   /* Nav dropdowns */
  --z-sticky:   200;   /* Sticky nav */
  --z-overlay:  300;   /* Backdrop overlays */
  --z-modal:    400;   /* Modals, drawers */
  --z-toast:    500;   /* Notifications */
}


/* ============================================================
   11. BASE RESET & ROOT STYLES
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Offset anchor links by sticky nav height */
  scroll-padding-top: calc(var(--nav-height) + var(--space-6));
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Headings: Playfair Display, warm dark navy --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl);  }
h4 { font-size: var(--text-lg);  letter-spacing: var(--tracking-normal); }
h5 { font-size: var(--text-base); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-normal); }
h6 { font-size: var(--text-sm);   font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); }

/* h1/h2 scale fluidly via clamp() in their token values above */

/* --- Body text elements --- */
p {
  line-height: var(--leading-relaxed);
  max-width: var(--reading-width);
}

/* Remove max-width for paragraphs inside layout containers
   that manage width themselves (nav, cards, etc.) */
nav p,
.card p,
.testimonial p,
footer p {
  max-width: none;
}

strong, b {
  font-weight: var(--weight-semibold);
}

em, i {
  font-style: italic;
}

small {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* --- Links --- */
a {
  color: var(--color-accent);
  text-decoration: none;
  transition: var(--transition-color);
}

a:hover {
  color: var(--color-accent-hover);
}

a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* --- Lists --- */
ul, ol {
  padding-left: var(--space-6);
}

li {
  margin-bottom: var(--space-2);
  line-height: var(--leading-normal);
}

/* --- Images --- */
img, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* --- HR / Dividers --- */
hr {
  border: none;
  border-top: var(--border-width) solid var(--color-border);
  margin: var(--space-8) 0;
}

/* --- Code --- */
code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--color-bg-alt);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  overflow-x: auto;
  line-height: var(--leading-relaxed);
}

pre code {
  background: transparent;
  padding: 0;
}

/* --- Blockquote (base — extended in components.css) --- */
blockquote {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-6);
  margin: var(--space-8) 0;
  color: var(--color-text-muted);
  font-style: italic;
}

/* --- Tables --- */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

th {
  font-weight: var(--weight-semibold);
  font-family: var(--font-body);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--color-border);
  color: var(--color-primary);
}

td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}

/* --- Forms base (extended in components.css) --- */
input, textarea, select {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  width: 100%;
  transition: var(--transition-color), box-shadow var(--duration-fast) var(--ease-default);
  -webkit-appearance: none;
  appearance: none;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-faint);
}

/* --- Selection --- */
::selection {
  background-color: var(--color-accent-light);
  color: var(--color-primary);
}

/* ============================================================
   UTILITY CLASSES
   Minimal set — layout helpers only. Not a utility framework.
   ============================================================ */

/* Container wrapper */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--container-padding-x-mobile);
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--container-padding-x);
  }
}

@media (min-width: 1200px) {
  .container {
    padding-inline: var(--container-padding-x-wide);
  }
}

/* Narrow container — blog posts, forms */
.container--narrow {
  max-width: var(--container-md);
}

/* Wide container */
.container--wide {
  max-width: var(--container-2xl);
}

/* Screen-reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Visually hidden but focusable (skip links) */
.sr-only:focus,
.sr-only:active {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Dark section context — flip text/border colors for sections
   with var(--color-bg-dark) background */
.section--dark {
  background-color: var(--color-bg-dark);
  color: var(--color-text-inverse);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark h6 {
  color: var(--color-text-inverse);
}

.section--dark p,
.section--dark li {
  color: var(--color-text-inverse-muted);
}

.section--dark hr {
  border-top-color: var(--color-border-dark);
}

/* Alt background section */
.section--alt {
  background-color: var(--color-bg-alt);
}


/* ============================================================
   PHASE 1 — BRIEF-SPEC TOKEN ADDITIONS
   Spacing aliases, layout shortcuts, transition shorthands,
   and z-index nav layer. These complement the numeric scale
   above — use either naming form in partials/components.
   ============================================================ */

:root {

  /* --- Named spacing aliases (brief-spec naming convention) ---
     Maps to the existing numeric scale. Both forms are valid;
     named aliases improve readability in partials. */
  --space-3xs: 0.25rem;    /*  4px — hairline gaps */
  --space-2xs: 0.5rem;     /*  8px — tight inner spacing */
  --space-xs:  0.75rem;    /* 12px — compact elements */
  --space-sm:  1rem;       /* 16px — base unit */
  --space-md:  1.5rem;     /* 24px — standard gap */
  --space-lg:  2rem;       /* 32px — component separation */
  --space-xl:  3rem;       /* 48px — large separators */
  --space-2xl: 4rem;       /* 64px — section padding */
  --space-3xl: 6rem;       /* 96px — landmark sections */

  /* --- Layout shortcuts ---
     --container-max mirrors --container-xl (1200px).
     --container-padding is mobile-first and updated at 768px below. */
  --container-max:          var(--container-xl);
  --container-padding:      var(--space-md);       /* mobile: 24px */
  --section-padding-y:      var(--space-2xl);       /* desktop: 4rem */
  --section-padding-y-sm:   var(--space-xl);        /* mobile:  3rem */

  /* --- Transition shorthands ---
     Property-agnostic shorthand tokens for use when combining
     duration + easing inline would be repetitive. */
  --transition-fast:    150ms ease;
  --transition-base:    250ms ease;
  --transition-slow:    400ms ease;

  /* --- Font weight alias --- */
  --weight-normal: var(--weight-regular);   /* alias for --weight-regular */

  /* --- Z-index: nav sticky layer --- */
  --z-nav: 100;           /* sticky site-nav bar */

}


/* ─── Section wrapper ──────────────────────────────────────
   Generic section vertical rhythm. Pair with a background
   modifier (.section--dark, .section--alt) as needed.
   ─────────────────────────────────────────────────────────── */

.section {
  padding-block: var(--section-padding-y-sm);
}

@media (min-width: 768px) {
  :root {
    --container-padding: var(--space-xl);   /* desktop: 3rem */
  }

  .section {
    padding-block: var(--section-padding-y);
  }
}


/* ============================================================
   BRIEF-SPEC TOKEN ADDITIONS — Phase 1 foundation components
   ============================================================ */

:root {

  /* Carousel animation duration */
  --duration-carousel: 60s;

  /* Dark section text */
  --color-on-dark:       var(--color-text-inverse);
  --color-on-dark-muted: var(--color-text-inverse-muted);

  /* Card defaults */
  --card-radius:   var(--radius-md);
  --card-shadow:   var(--shadow-card);
  --card-padding:  var(--space-md);

}


/* ============================================================
   SCROLL ANIMATIONS
   IntersectionObserver-driven fade-in. JS adds .is-visible
   when element enters the viewport. Reduced-motion safe.

   Content-visible-by-default (fixed 2026-07-22): .fade-in used to be
   opacity:0 unconditionally, with only main.js ever adding .is-visible
   to reveal it. Any failure between page load and that point in
   main.js — the script 404ing, an ad-blocker, an uncaught error
   earlier in the same top-level IIFE, a slow/broken CDN — left every
   .fade-in section on the site permanently invisible, sitewide,
   with no fallback. .fade-in is applied broadly (service cards,
   most page sections), so this was a whole-page-blank risk, not a
   cosmetic one.

   Fixed with the standard no-js/js pattern: content is visible by
   default; the hidden-until-scrolled state only applies once html.js
   is present (set by a tiny synchronous inline script in header.php
   that runs before any other script and can't meaningfully fail) AND
   main.js has independently confirmed it's ready to observe. If JS
   never runs at all, .no-js stays on <html> and content is simply
   visible — the correct progressive-enhancement fallback.
   ============================================================ */

.fade-in {
  opacity: 1;
  transform: none;
}

.js .fade-in.fade-in--armed:not(.is-visible) {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity var(--duration-animation) var(--ease-default), transform var(--duration-animation) var(--ease-default);
}

/* Every rule that carries the entrance transition or its stagger delay is
   scoped to .fade-in--armed, which main.js removes once the reveal finishes.
   These selectors out-specify component rules (.service-card and friends are
   a single class), so leaving them applied permanently made every later
   interaction on a revealed element inherit the 800ms entrance timing and a
   per-position delay. Keep the --armed scope on anything added here.
   (2026-07-22 — root cause of plan item 5.6, "hover reads as twitchy".) */
.js .fade-in--armed.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--duration-animation) var(--ease-default), transform var(--duration-animation) var(--ease-default);
}

.js .fade-in--armed:nth-child(2) { transition-delay: 0.1s; }
.js .fade-in--armed:nth-child(3) { transition-delay: 0.2s; }
.js .fade-in--armed:nth-child(4) { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .js .fade-in--armed,
  .js .fade-in--armed.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}