/* =====================================================
   Fit4 Group (F4G) — Brand CSS (Gilroy + Inter, Dark Core)
   Architecture: F4G Base + Brand (MU-Plugin)
   File: assets/css/brand-f4g.css
   ===================================================== */

/* =====================
   @font-face (editor-safe)
   ===================== */
@font-face{font-family:"Gilroy";src:local("Gilroy Regular"),local("Gilroy-Regular"),url("../fonts/Gilroy-Regular.woff2") format("woff2"),url("../fonts/Gilroy-Regular.woff") format("woff");font-weight:400;font-style:normal}
@font-face{font-family:"Gilroy";src:local("Gilroy Bold"),local("Gilroy-Bold"),url("../fonts/Gilroy-Bold.woff2") format("woff2"),url("../fonts/Gilroy-Bold.woff") format("woff");font-weight:700;font-style:normal}
@font-face{font-family:"Inter";src:local("Inter 18pt Regular"),local("Inter18pt-Regular"),url("../fonts/Inter18pt-Regular.woff2") format("woff2"),url("../fonts/Inter18pt-Regular.woff") format("woff");font-weight:400;font-style:normal}
@font-face{font-family:"Inter";src:local("Inter 18pt Bold"),local("Inter18pt-Bold"),url("../fonts/Inter18pt-Bold.woff2") format("woff2"),url("../fonts/Inter18pt-Bold.woff") format("woff");font-weight:700;font-style:normal}

/* =====================
   F4G Core Tokens (Dark)
   =====================
   Primary (Teal)     : #008080
   Secondary (Copper) : #B87333
   Background (Dark)  : #0B0B0B
   Surface (Card)     : #141414
   Text (Light)       : #FFFFFF
*/
:root{
  /* Brand colors */
  --brand-primary:#008080;   /* Teal */
  --brand-secondary:#B87333; /* Copper */
  --brand-text:#FFFFFF;      /* Light text on dark */
  --brand-bg:#0B0B0B;        /* Anthracite */
  --brand-surface:#141414;   /* Dark surface */
  --brand-muted:#8F8F8F;     /* UI neutral */
  --brand-link:#008080;      /* Link color */

  /* Typography tokens */
  --font-heading:'Gilroy','Inter',sans-serif;
  --font-body:'Inter','Gilroy',sans-serif;
}

/* =====================
   Back-Compat Aliases
   ===================== */
:root{
  /* Generic fit4 aliases (legacy) */
  --fit4-primary: var(--brand-primary);
  --fit4-secondary: var(--brand-secondary);
  --fit4-text: var(--brand-text);
  --fit4-bg: var(--brand-bg);
  --fit4-light-gray: #C9C9C9;
  --fit4-white: #FFFFFF;

  /* f4g-specific */
  --f4g-primary: var(--brand-primary);
  --f4g-accent:  var(--brand-secondary);
  --f4g-text:    var(--brand-text);
  --f4g-bg:      var(--brand-bg);
}

/* =====================
   Base usage
   ===================== */
body{font-family:var(--font-body);background-color:var(--brand-bg);color:var(--brand-text)}
h1,h2,h3,h4,h5{font-family:var(--font-heading);color:var(--brand-text)}

.f4g-heading{font-family:var(--font-heading);color:var(--brand-text)}
.f4g-body{font-family:var(--font-body);color:var(--brand-text)}
.bg-f4g{background-color:var(--brand-bg);color:var(--brand-text)}
.text-f4g-primary{color:var(--brand-primary)}
.text-f4g-accent{color:var(--brand-secondary)}

/* =====================
   Components (Dark)
   ===================== */
button,.thrive-button,.tcb-button-link{background-color:var(--brand-primary);color:#FFFFFF;border:none;padding:12px 24px;border-radius:10px;font-weight:700;transition:filter .25s ease,transform .1s ease}
button:hover,.thrive-button:hover,.tcb-button-link:hover{filter:brightness(1.06);transform:translateY(-1px)}

button.secondary,.thrive-button.secondary{background-color:var(--brand-secondary);color:#0B0B0B}
button.secondary:hover{filter:brightness(1.04)}

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

input[type="text"],input[type="email"],textarea,select{background:#0F0F0F;border:1px solid #2A2A2A;color:var(--brand-text);padding:10px;border-radius:8px;width:100%}
input:focus,textarea:focus{border-color:var(--brand-primary);outline:none;box-shadow:0 0 0 3px rgba(0,128,128,.2)}

.card{background:var(--brand-surface);border:1px solid rgba(255,255,255,.07);border-radius:16px;box-shadow:0 10px 24px rgba(0,0,0,.25);padding:1.5rem;color:var(--brand-text)}

.alert{background:#1C1C1C;border-left:4px solid var(--brand-secondary);padding:1rem;border-radius:8px}

/* =====================
   Utilities
   ===================== */
.text-center{text-align:center}
.mt-2{margin-top:2rem}
.mb-2{margin-bottom:2rem}
.p-2{padding:2rem}

/* =====================
   Notes
   =====================
   • Required fonts in assets/fonts/:
     Gilroy-Regular/Bold.(woff2|woff), Inter18pt-Regular/Bold.(woff2|woff)
   • This file is loaded after system.base.css. Keep overrides minimal; prefer token changes.
*/