/* ============================================================================
   Datafitters · Design System · Foundations
   ----------------------------------------------------------------------------
   Color + type tokens for every Datafitters surface.
   The palette is aligned to Mockup C (the team's recommended homepage
   direction), which sources accent colors directly from the Control Tower
   Power BI dashboard so marketing and product feel like one design system.
   ========================================================================= */

/* ---------- Webfonts (self-hosted; same files used in production) -------- */

@font-face {
  font-family: "Founders Grotesk";
  src: url("../fonts/founders-grotesk-light.woff") format("woff");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Founders Grotesk";
  src: url("../fonts/FoundersGrotesk-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Founders Grotesk";
  src: url("../fonts/FoundersGrotesk-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ===========================================================================
   TOKENS
   ========================================================================= */

:root {

  /* ---------- Surfaces (light & airy; matches Control Tower shell) ------- */
  --df-bg:        #FFFFFF;
  --df-bg-soft:   #F5F7FB;
  --df-bg-card:   #FFFFFF;
  --df-bg-tile:   #F8FAFC;
  --df-rule:      #E5E9F0;
  --df-rule-2:    #D9DEE8;

  /* ---------- Ink ------------------------------------------------------- */
  --df-ink:       #1A2030;
  --df-ink-2:     #3A4256;
  --df-muted:     #6B7488;
  --df-dim:       #8E97AB;

  /* ---------- Brand teal ------------------------------------------------ */
  --df-teal:      #1FBFC9;
  --df-teal-d:    #0E9AA3;
  --df-teal-s:    #E5F7F8;

  /* ---------- Power BI palette ----------------------------------------- */
  --df-pbi-blue:   #5B9BD5;
  --df-pbi-blue-s: #ECF3FB;
  --df-pbi-pink:   #D63384;
  --df-pbi-pink-s: #FCE6EF;
  --df-pbi-mint:   #7FC495;
  --df-pbi-mint-s: #E9F5EC;
  --df-pbi-lime:   #9CC93C;
  --df-pbi-lime-s: #F1F7DC;
  --df-pbi-amber:  #E0A93B;
  --df-pbi-amber-s:#FBF1DA;

  /* ---------- Logo gradient stops -------------------------------------- */
  --df-logo-teal:  #3ED9B5;
  --df-logo-green: #6FE05A;
  --df-logo-blue:  #1EA7E0;
  --df-logo-ink:   #3C3F48;

  /* ---------- Semantic ------------------------------------------------- */
  --df-success:    #5BA873;
  --df-success-s:  var(--df-pbi-mint-s);
  --df-warning:    var(--df-pbi-amber);
  --df-warning-s:  var(--df-pbi-amber-s);
  --df-error:      #D6435C;
  --df-error-s:    #FCE9ED;
  --df-info:       var(--df-pbi-blue);
  --df-info-s:     var(--df-pbi-blue-s);

  --df-fg1:        var(--df-ink);
  --df-fg2:        var(--df-ink-2);
  --df-fg3:        var(--df-muted);
  --df-fg-on-teal: #FFFFFF;
  --df-fg-on-dark: #FFFFFF;

  /* ---------- Type families -------------------------------------------- */
  --df-font-sans:    "Founders Grotesk", "Lato", system-ui, -apple-system, sans-serif;
  --df-font-legacy:  "Lato", system-ui, -apple-system, sans-serif;
  --df-font-mono:    "IBM Plex Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;

  /* ---------- Type scale ------------------------------------------------ */
  --df-fs-display:   clamp(40px, 5.4vw, 72px);
  --df-fs-h1:        clamp(34px, 4.4vw, 52px);
  --df-fs-h2:        clamp(30px, 3.8vw, 46px);
  --df-fs-h3:        30px;
  --df-fs-h4:        21px;
  --df-fs-h5:        19px;
  --df-fs-lede:      18.5px;
  --df-fs-body:      16px;
  --df-fs-body-sm:   14.5px;
  --df-fs-caption:   13px;
  --df-fs-eyebrow:   12.5px;
  --df-fs-micro:     11px;

  --df-fw-light:    300;
  --df-fw-regular:  400;
  --df-fw-medium:   500;

  --df-lh-tight:    1.05;
  --df-lh-snug:     1.15;
  --df-lh-normal:   1.5;
  --df-lh-loose:    1.65;

  --df-tracking-tight:  -0.025em;
  --df-tracking-snug:   -0.02em;
  --df-tracking-flat:   -0.005em;
  --df-tracking-wide:    0.04em;
  --df-tracking-eyebrow: 0.08em;

  /* ---------- Radii ---------------------------------------------------- */
  --df-r-sm:   6px;
  --df-r:      10px;
  --df-r-l:    16px;
  --df-r-pill: 999px;

  /* ---------- Shadows -------------------------------------------------- */
  --df-shadow-sm:   0 1px 2px rgba(20, 28, 48, .05);
  --df-shadow:      0 6px 18px rgba(20, 28, 48, .06);
  --df-shadow-lg:   0 24px 50px -20px rgba(20, 28, 48, .12);
  --df-shadow-teal: 0 4px 12px rgba(31, 191, 201, .3);

  /* ---------- Spacing (4px grid) --------------------------------------- */
  --df-space-1:  4px;
  --df-space-2:  8px;
  --df-space-3:  12px;
  --df-space-4:  16px;
  --df-space-5:  20px;
  --df-space-6:  24px;
  --df-space-7:  32px;
  --df-space-8:  40px;
  --df-space-9:  56px;
  --df-space-10: 72px;
  --df-space-11: 88px;

  /* ---------- Layout --------------------------------------------------- */
  --df-container: 1280px;
  --df-container-narrow: 760px;
  --df-gutter-x:  28px;
  --df-section-y: 88px;

  /* ---------- Motion --------------------------------------------------- */
  --df-ease:      cubic-bezier(.2, .8, .2, 1);
  --df-dur-fast:  .15s;
  --df-dur:       .2s;
  --df-dur-slow:  .4s;
}

/* ===========================================================================
   SEMANTIC TYPE STYLES
   ========================================================================= */

.df-display,
.df h1,
h1.df {
  font-family: var(--df-font-sans);
  font-weight: var(--df-fw-light);
  font-size: var(--df-fs-display);
  line-height: var(--df-lh-tight);
  letter-spacing: var(--df-tracking-snug);
  color: var(--df-ink);
}

.df-h1, .df h2, h2.df {
  font-family: var(--df-font-sans);
  font-weight: var(--df-fw-light);
  font-size: var(--df-fs-h1);
  line-height: var(--df-lh-tight);
  letter-spacing: var(--df-tracking-snug);
  color: var(--df-ink);
}

.df-h2 {
  font-family: var(--df-font-sans);
  font-weight: var(--df-fw-light);
  font-size: var(--df-fs-h2);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--df-ink);
}

.df-h3, .df h3, h3.df {
  font-family: var(--df-font-sans);
  font-weight: var(--df-fw-light);
  font-size: var(--df-fs-h3);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--df-ink);
}

.df-h4, .df h4, h4.df {
  font-family: var(--df-font-sans);
  font-weight: var(--df-fw-regular);
  font-size: var(--df-fs-h4);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--df-ink);
}

.df-h5 {
  font-family: var(--df-font-sans);
  font-weight: var(--df-fw-medium);
  font-size: var(--df-fs-h5);
  line-height: 1.2;
  letter-spacing: var(--df-tracking-flat);
  color: var(--df-ink);
}

.df-lede {
  font-family: var(--df-font-sans);
  font-weight: var(--df-fw-light);
  font-size: var(--df-fs-lede);
  line-height: 1.55;
  color: var(--df-ink-2);
}

.df-body, .df p, p.df {
  font-family: var(--df-font-sans);
  font-weight: var(--df-fw-regular);
  font-size: var(--df-fs-body);
  line-height: var(--df-lh-normal);
  color: var(--df-ink-2);
}

.df-body-sm {
  font-family: var(--df-font-sans);
  font-weight: var(--df-fw-light);
  font-size: var(--df-fs-body-sm);
  line-height: 1.55;
  color: var(--df-ink-2);
}

.df-caption {
  font-family: var(--df-font-sans);
  font-weight: var(--df-fw-regular);
  font-size: var(--df-fs-caption);
  line-height: 1.45;
  color: var(--df-muted);
}

.df-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--df-font-sans);
  font-weight: var(--df-fw-medium);
  font-size: var(--df-fs-eyebrow);
  letter-spacing: var(--df-tracking-wide);
  text-transform: uppercase;
  color: var(--df-teal-d);
}
.df-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--df-teal);
  display: inline-block;
}

.df-accent {
  color: var(--df-teal-d);
  font-weight: var(--df-fw-regular);
}

.df-kpi {
  font-family: var(--df-font-sans);
  font-weight: var(--df-fw-light);
  font-size: 34px;
  line-height: 1;
  letter-spacing: var(--df-tracking-snug);
  font-feature-settings: "tnum";
  color: var(--df-ink);
}

.df-mono {
  font-family: var(--df-font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
}