/* ============================================================
   brand.css — TheGoalIsClear Design System
   Voltaire Frangela (headings) + Poppins (body)
   ============================================================ */

/* ── Font face ── */
@font-face {
  font-family: 'Voltaire Frangela';
  src: url('./Voltaire-Frangela.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* ── Base / Neutral tokens ── */
:root {
  /* Brand primaries */
  --brand-bruh:        #00249C;
  --brand-bruh-hover:  #001e84;
  --brand-bruh-light:  #e6eaf5;
  --brand-bruh-mid:    #3356b8;
  --brand-bruh-dark:   #001a73;

  --brand-gurl:        #8F3F99;
  --brand-gurl-hover:  #7a3583;
  --brand-gurl-light:  #f3eaf5;
  --brand-gurl-mid:    #a663af;
  --brand-gurl-dark:   #6b2e73;

  /* Neutral palette */
  --neutral-text:      #494949;
  --neutral-heading:   #1a1a1a;
  --neutral-muted:     #6b7788;
  --neutral-muted2:    #8a94a3;
  --neutral-line:      rgba(15, 23, 42, 0.08);
  --neutral-bg:        #ffffff;
  --neutral-panel:     #ffffff;

  /* Active theme tokens */
  --bg:           var(--neutral-bg);
  --panel:        var(--neutral-panel);
  --text:         var(--neutral-text);
  --heading:      var(--neutral-heading);
  --muted:        var(--neutral-muted);
  --muted2:       var(--neutral-muted2);
  --line:         var(--neutral-line);
  --accent:       var(--brand-bruh);
  --accent-hover: var(--brand-bruh-hover);
  --accent2:      var(--brand-bruh-mid);
  --accent-light: var(--brand-bruh-light);
  --accent-dark:  var(--brand-bruh-dark);

  /* Card surfaces */
  --shadow-card:  0 6px 18px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 14px 36px rgba(0, 0, 0, 0.10);
  --radius-card:  12px;
  --radius-sm:    10px;
  --radius-btn:   8px;
  --radius-pill:  999px;

  /* Spacing */
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  18px;
  --space-lg:  28px;
  --space-xl:  44px;
  --space-2xl: 56px;

  /* Typography */
  --font-body:     'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-headline: 'Voltaire Frangela', 'Voltaire', sans-serif;

  /* Buttons — flat solid */
  --btn-bg:             var(--brand-bruh);
  --btn-color:          #ffffff;
  --btn-shadow:         0 4px 16px rgba(0, 36, 156, 0.22);
  --btn-shadow-hover:   0 8px 28px rgba(0, 36, 156, 0.30);

  --btn-alt-bg:           var(--brand-bruh-mid);
  --btn-alt-color:        #ffffff;
  --btn-alt-shadow:       0 4px 14px rgba(0, 36, 156, 0.16);
  --btn-alt-shadow-hover: 0 8px 24px rgba(0, 36, 156, 0.22);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(0, 36, 156, 0.28);
}

/* ── Bruh theme ── */
[data-brand="bruh"] {
  --bg:           #FFFFFF;
  --accent:       var(--brand-bruh);
  --accent-hover: var(--brand-bruh-hover);
  --accent2:      var(--brand-bruh-mid);
  --accent-light: var(--brand-bruh-light);
  --accent-dark:  var(--brand-bruh-dark);

  --btn-bg:           var(--brand-bruh);
  --btn-shadow:       0 4px 16px rgba(0, 36, 156, 0.22);
  --btn-shadow-hover: 0 8px 28px rgba(0, 36, 156, 0.30);

  --btn-alt-bg:           var(--brand-bruh-mid);
  --btn-alt-shadow:       0 4px 14px rgba(0, 36, 156, 0.16);
  --btn-alt-shadow-hover: 0 8px 24px rgba(0, 36, 156, 0.22);

  --focus-ring: 0 0 0 3px rgba(0, 36, 156, 0.28);
}

/* ── Gurl theme ── */
[data-brand="gurl"] {
  --bg:           #F7F8F9;
  --accent:       var(--brand-gurl);
  --accent-hover: var(--brand-gurl-hover);
  --accent2:      var(--brand-gurl-mid);
  --accent-light: var(--brand-gurl-light);
  --accent-dark:  var(--brand-gurl-dark);

  --btn-bg:           var(--brand-gurl);
  --btn-shadow:       0 4px 16px rgba(143, 63, 153, 0.22);
  --btn-shadow-hover: 0 8px 28px rgba(143, 63, 153, 0.30);

  --btn-alt-bg:           var(--brand-gurl-mid);
  --btn-alt-shadow:       0 4px 14px rgba(143, 63, 153, 0.16);
  --btn-alt-shadow-hover: 0 8px 24px rgba(143, 63, 153, 0.22);

  --focus-ring: 0 0 0 3px rgba(143, 63, 153, 0.28);
}

/* ── Shared typography ── */
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-headline);
  color: var(--heading);
}

/* ── Button token integration ── */
.button {
  background: var(--btn-bg);
  color: #ffffff;
  box-shadow: var(--btn-shadow);
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-weight: 600;
  transition: background 0.18s, box-shadow 0.18s, transform 0.18s;
}
.button:hover {
  background: var(--accent-hover);
  box-shadow: var(--btn-shadow-hover);
  transform: translateY(-1px);
}
.button:focus-visible {
  outline: none;
  box-shadow: var(--btn-shadow), var(--focus-ring);
}

.button.alt {
  background: var(--btn-alt-bg);
  color: #ffffff;
  box-shadow: var(--btn-alt-shadow);
}
.button.alt:hover {
  box-shadow: var(--btn-alt-shadow-hover);
}
.button.alt:focus-visible {
  outline: none;
  box-shadow: var(--btn-alt-shadow), var(--focus-ring);
}

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