/* =====================================================
   F4G System Base CSS — v1.5
   Scope: global, brand‑agnostic base (tokens, resets, utilities, core components)
   Architecture: MU‑Plugin (f4g-brand-css-loader)
   Load order: 1) system.base.css  →  2) brand-<key>.css
   Notes:
   • No @font-face here. Brand fonts live in brand-<key>.css.
   • Only token defaults and neutral components. Brands override via tokens.
   ===================================================== */

/* =====================
   0) Resets & Normalization
   ===================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
img, svg, video, canvas, audio, iframe { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

/* =====================
   1) Token Defaults (safe fallbacks)
   Brands MUST override these via brand-<key>.css
   ===================== */
:root {
  /* Colors (neutral light defaults) */
  --brand-primary: #0A84FF;     /* placeholder blue */
  --brand-secondary: #6B7280;   /* gray-500 */
  --brand-accent: #B87333;      /* copper (system tie-in) */
  --brand-bg: #FFFFFF;          /* surface bg */
  --brand-surface: #F7F7F7;     /* cards */
  --brand-text: #0B0B0B;        /* graphite */
  --brand-muted: #C9C9C9;       /* ui borders */
  --brand-link: var(--brand-primary);

  /* Typography (brands replace with own families) */
  --font-heading: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Sizing scale */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px;
  --space-1: .5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem;
  --shadow-card: 0 8px 20px rgba(0,0,0,.08);

  /* Assistive */
  color-scheme: light dark; /* allows brand auto themes to switch */
}

/* Legacy alias variables (map to brand tokens) */
:root {
  /* MD */
  --md-primary: var(--brand-primary);
  --md-accent:  var(--brand-secondary);
  --md-bg:      var(--brand-bg);
  --md-text:    var(--brand-text);
  --font-md-heading: var(--font-heading);
  --font-md-body:    var(--font-body);
  /* F4G generic */
  --fit4-primary: var(--brand-primary);
  --fit4-secondary: var(--brand-secondary);
  --fit4-text: var(--brand-text);
  --fit4-bg: var(--brand-bg);
  --fit4-light-gray: var(--brand-muted);
  --fit4-white: #FFFFFF;
  /* F4A */
  --f4a-primary: var(--brand-primary);
  --f4a-accent:  var(--brand-accent);
  --f4a-text:    var(--brand-text);
  --f4a-bg:      var(--brand-bg);
  /* F4G */
  --f4g-primary: var(--brand-primary);
  --f4g-accent:  var(--brand-secondary);
  --f4g-text:    var(--brand-text);
  --f4g-bg:      var(--brand-bg);
  /* CASU/C21 */
  --casu-primary: var(--brand-primary);
  --casu-accent:  var(--brand-accent);
  --casu-text:    var(--brand-text);
  --casu-bg:      var(--brand-bg);
}

/* =====================
   2) Base Typography & Body
   ===================== */
body {
  font-family: var(--font-body);
  color: var(--brand-text);
  background: var(--brand-bg);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--brand-text); line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.75rem); }

p { margin: 0 0 1em; }
a { color: var(--brand-link); text-decoration: none; text-underline-offset: 2px; transition: color .2s ease; }
a:hover { text-decoration: underline; }

/* =====================
   3) Core Components (token‑driven)
   Keep simple; brands style via tokens only
   ===================== */
.button, .btn, button, .tcb-button-link, .thrive-button {
  display: inline-block; border: 0; border-radius: var(--radius-md);
  padding: .75rem 1.25rem; font-weight: 700; cursor: pointer;
  background: var(--brand-primary); color: #fff; transition: filter .2s ease, transform .06s ease;
}
.button:hover, .btn:hover, button:hover, .tcb-button-link:hover, .thrive-button:hover { filter: brightness(1.06); transform: translateY(-1px); }
.button.secondary, .btn.secondary { background: var(--brand-secondary); color: #0B0B0B; }

.input, input[type="text"], input[type="email"], input[type="url"], input[type="password"], textarea, select {
  width: 100%; background: #fff; color: var(--brand-text);
  border: 1px solid var(--brand-muted); border-radius: var(--radius-sm);
  padding: .65rem .75rem; outline: none; transition: border-color .2s ease, box-shadow .2s ease;
}
.input:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 25%, transparent);
}

.card {
  background: var(--brand-surface); color: var(--brand-text);
  border: 1px solid rgba(0,0,0,.06); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: var(--space-3);
}

.alert { background: #FFF6E9; color: #4B1F0E; border-left: 4px solid var(--brand-accent); padding: var(--space-2); border-radius: var(--radius-sm); }

/* =====================
   4) Utilities (subset)
   ===================== */
.text-center { text-align: center; }
.mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); }
.mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); }
.p-1 { padding: var(--space-1); } .p-2 { padding: var(--space-2); } .p-3 { padding: var(--space-3); }

.container { width: min(1200px, 100% - 2rem); margin-inline: auto; }

/* =====================
   5) Login Page Baseline (brand picks tokens) — compact: login, lost password, register
   Overrides global h1 clamp so wp-login is not oversized.
   ===================== */
body.login { background: var(--brand-bg); }
body.login #login {
  width: 100%;
  max-width: 22rem;
  margin: 1rem auto;
  padding: 1rem 1.25rem;
}
/* Core logo / title link — keep small (global h1 clamp does not apply usefully here) */
body.login h1,
body.login h1 a {
  font-size: 1.125rem !important;
  line-height: 1.25;
  font-weight: 600;
}
body.login h1 {
  margin: 0 0 0.75rem;
}
body.login #loginform,
body.login #lostpasswordform,
body.login #registerform {
  background: var(--brand-surface); color: var(--brand-text);
  border: 1px solid var(--brand-muted); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-2);
  font-size: 0.9375rem;
}
body.login form p { margin-bottom: 0.65rem; }
body.login form p:last-child { margin-bottom: 0; }
body.login label { font-size: 0.875rem; }
body.login #login a { color: var(--brand-link); }
body.login .input,
body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"],
body.login input[type="url"] {
  padding: 0.45rem 0.6rem !important;
  font-size: 0.9375rem !important;
  line-height: 1.35;
  min-height: 0;
}
body.login .button.button-primary,
body.login .button.button-large,
body.login input[type="submit"] {
  padding: 0.45rem 1rem !important;
  font-size: 0.9375rem !important;
  line-height: 1.35 !important;
  min-height: 0 !important;
  height: auto !important;
}
body.login #nav,
body.login #backtoblog {
  font-size: 0.8125rem;
  margin-top: 0.75rem !important;
  padding: 0 !important;
}
body.login .message,
body.login #login_error,
body.login .success {
  font-size: 0.875rem;
  padding: 0.5rem 0.65rem !important;
  margin-bottom: 0.75rem !important;
}
body.login .indicator-hint,
body.login .pw-weak,
body.login #pass-strength-result {
  font-size: 0.8125rem !important;
}
body.login .language-switcher { font-size: 0.8125rem; }
body.login .privacy-policy-page-link { font-size: 0.8125rem; }

/* =====================
   6) Accessibility & Motion
   ===================== */
:focus { outline: 2px solid color-mix(in srgb, var(--brand-primary) 50%, transparent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =====================
   7) Dark Mode Helpers (if a brand uses theme toggles)
   ===================== */
body.theme-dark, body[data-theme="dark"] {
  --brand-bg: #0B0B0B;
  --brand-surface: #141414;
  --brand-text: #FFFFFF;
}

/* End of system.base.css v1.5 */