/* ─────────────────────────────────────────────────────────────────
   TechForge Design System — tokens
   Multi-brand: TechForge Innovators · Bag-N-Shoe Envy · Dashboards
   ───────────────────────────────────────────────────────────────── */

/* ── Type families (Google Fonts CDN) ──────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Barlow:wght@400;500;600;700&family=Bowlby+One+SC&family=DM+Sans:wght@400;500;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ── TechForge Innovators ──────────────────────────────────── */
  --tf-navy:        #15294A;     /* primary brand                 */
  --tf-navy-deep:   #0E1D3A;     /* hover                         */
  --tf-navy-soft:   #243C66;     /* secondary surface             */
  --tf-steel:       #3D5278;     /* mid navy                      */
  --tf-ember:       #F58A1F;     /* spark orange — accent only    */
  --tf-ember-deep:  #D6730B;     /* hover                         */
  --tf-spark:       #FFC15C;     /* yellow highlight              */
  --tf-paper:       #FAF7F1;     /* off-white surface             */
  --tf-paper-warm:  #F2EDE2;     /* warmer cream                  */
  --tf-ink:         #1A1F2B;     /* body text on light            */

  /* ── Bag-N-Shoe Envy ───────────────────────────────────────── */
  --bs-gold:        #C9A45A;     /* champagne primary             */
  --bs-gold-deep:   #A78440;     /* hover                         */
  --bs-gold-light:  #E8D9B8;     /* gold wash / blush             */
  --bs-black:       #1A1612;     /* warm near-black               */
  --bs-ink:         #2A2520;     /* body text                     */
  --bs-cream:       #F0EBE0;     /* parchment surface             */
  --bs-cream-deep:  #E5DDCB;     /* darker cream                  */
  --bs-rose:        #B07A6E;     /* dusty rose accent             */

  /* ── Personal Dashboard (dark) ─────────────────────────────── */
  --dash-bg:        #0B1220;
  --dash-surface:   #121A2E;
  --dash-surface-2: #1A2440;
  --dash-line:      #1E2A44;
  --dash-fg:        #E6ECF5;
  --dash-fg-dim:    #8B97AE;
  --dash-fg-mute:   #5A6580;

  /* ── Status / semantic (shared) ────────────────────────────── */
  --ok:             #3BB273;
  --ok-bg:          #E6F4EC;
  --warn:           #F5B83D;
  --warn-bg:        #FBEFD2;
  --err:            #E2574C;
  --err-bg:         #FBE4E1;
  --info:           #4A8FE2;
  --info-bg:        #E3EEFB;

  /* ── Neutrals (shared) ─────────────────────────────────────── */
  --n-0:   #FFFFFF;
  --n-50:  #F7F7F5;
  --n-100: #EFEEEA;
  --n-200: #DEDCD3;
  --n-300: #BFBCB0;
  --n-400: #8E8B7E;
  --n-500: #6B6859;
  --n-600: #4D4B40;
  --n-700: #34322B;
  --n-800: #1F1E1A;
  --n-900: #0E0D0B;

  /* ── Foreground aliases (light mode default = TechForge) ───── */
  --fg-1: var(--tf-ink);        /* primary text                   */
  --fg-2: var(--n-500);         /* secondary text                 */
  --fg-3: var(--n-400);         /* tertiary / placeholder         */
  --bg-1: var(--n-0);           /* primary surface                */
  --bg-2: var(--tf-paper);      /* secondary surface              */
  --bg-3: var(--tf-paper-warm); /* tertiary surface               */
  --line: rgba(21, 41, 74, .12);

  /* ── Type families ─────────────────────────────────────────── */
  --font-display-tf: "Barlow Condensed", "Oswald", Impact, sans-serif;
  --font-body-tf:    "Barlow", system-ui, sans-serif;
  --font-display-bs:   "Bowlby One SC", "Bowlby One", "Lilita One", Impact, sans-serif;
  --font-editorial-bs: "Cormorant Garamond", "Playfair Display", "Georgia", serif;
  --font-body-bs:      "DM Sans", system-ui, sans-serif;
  --font-accent-bs:    "Cormorant Garamond", "Georgia", serif;
  --font-mono:       "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Type scale ────────────────────────────────────────────── */
  --t-12: 12px; --t-14: 14px; --t-16: 16px; --t-18: 18px;
  --t-20: 20px; --t-24: 24px; --t-32: 32px; --t-40: 40px;
  --t-56: 56px; --t-72: 72px; --t-96: 96px;

  /* ── Spacing (4px base) ────────────────────────────────────── */
  --s-1:  4px;  --s-2:  8px;  --s-3:  12px; --s-4:  16px;
  --s-6:  24px; --s-8:  32px; --s-12: 48px; --s-16: 64px;
  --s-24: 96px;

  /* ── Radii ─────────────────────────────────────────────────── */
  --r-0: 0;     --r-2: 2px;   --r-4: 4px;   --r-6: 6px;
  --r-8: 8px;   --r-12: 12px; --r-pill: 999px;

  /* ── Shadows ───────────────────────────────────────────────── */
  --sh-tf-press:  0 2px 0 0 var(--tf-navy);
  --sh-tf-card:   0 1px 0 0 rgba(21, 41, 74, .08), 0 0 0 1px rgba(21, 41, 74, .08);
  --sh-bs-card:   0 10px 30px -10px rgba(42, 37, 32, .25);
  --sh-bs-lift:   0 18px 40px -12px rgba(42, 37, 32, .32);
  --sh-focus-tf:  0 0 0 2px var(--tf-paper), 0 0 0 4px var(--tf-ember);
  --sh-focus-bs:  0 0 0 2px var(--bs-cream), 0 0 0 4px var(--bs-gold);

  /* ── Motion ────────────────────────────────────────────────── */
  --ease:     cubic-bezier(.2,.6,.2,1);
  --dur-fast: 100ms;
  --dur:      150ms;
  --dur-slow: 220ms;
  --dur-hero: 400ms;
}

/* ── Semantic element styles (apply by class) ─────────────────── */

.h-display-tf {
  font-family: var(--font-display-tf);
  font-weight: 800;
  font-size: clamp(40px, 6vw, 72px);
  line-height: .95;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--tf-navy);
}
.h1-tf, h1.tf {
  font-family: var(--font-display-tf);
  font-weight: 700;
  font-size: var(--t-40);
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--tf-navy);
}
.h2-tf, h2.tf {
  font-family: var(--font-display-tf);
  font-weight: 700;
  font-size: var(--t-32);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--tf-navy);
}
.h3-tf, h3.tf {
  font-family: var(--font-body-tf);
  font-weight: 700;
  font-size: var(--t-20);
  line-height: 1.25;
  color: var(--tf-navy);
}
.eyebrow-tf {
  font-family: var(--font-body-tf);
  font-weight: 700;
  font-size: var(--t-12);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tf-ember);
}
.body-tf, p.tf {
  font-family: var(--font-body-tf);
  font-weight: 400;
  font-size: var(--t-16);
  line-height: 1.55;
  color: var(--fg-1);
}
.small-tf {
  font-family: var(--font-body-tf);
  font-size: var(--t-14);
  color: var(--fg-2);
}

.h-display-bs {
  font-family: var(--font-display-bs);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1;
  letter-spacing: .01em;
  color: var(--bs-black);
}
.h1-bs, h1.bs {
  font-family: var(--font-display-bs);
  font-size: var(--t-40);
  line-height: 1.05;
  color: var(--bs-black);
}
.h2-bs, h2.bs {
  font-family: var(--font-display-bs);
  font-size: var(--t-32);
  line-height: 1.1;
  color: var(--bs-black);
}
.h3-bs, h3.bs {
  font-family: var(--font-body-bs);
  font-weight: 700;
  font-size: var(--t-20);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--bs-black);
}
.eyebrow-bs {
  font-family: var(--font-body-bs);
  font-weight: 700;
  font-size: var(--t-12);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--bs-gold-deep);
}
.body-bs, p.bs {
  font-family: var(--font-body-bs);
  font-size: var(--t-16);
  line-height: 1.6;
  color: var(--bs-ink);
}
.tagline-bs {
  font-family: var(--font-accent-bs);
  font-style: italic;
  font-size: var(--t-20);
  color: var(--bs-rose);
}

/* Dashboard (dark) */
.metric-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: lowercase;
  color: var(--dash-fg-dim);
}
.metric-value {
  font-family: var(--font-body-tf);
  font-weight: 600;
  font-size: var(--t-32);
  line-height: 1;
  color: var(--dash-fg);
  font-variant-numeric: tabular-nums;
}
.metric-delta-ok  { color: var(--ok);   font-family: var(--font-mono); font-size: var(--t-12); }
.metric-delta-err { color: var(--err);  font-family: var(--font-mono); font-size: var(--t-12); }
.code, code {
  font-family: var(--font-mono);
  font-size: .9em;
}