/* tfs 2.0.0: generated from tokens.json by tools/build.py. Do not edit. */

@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/pjs-400-800-latin.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-500-700-latin.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/poppins-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/poppins-500-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --white: #ffffff;
  --grey-50: #f7f7f7;
  --grey-100: #f3f2f1;
  --grey-200: #e2e2e2;
  --grey-500: #6b6b6b;
  --grey-800: #484848;
  --grey-900: #2c2c2c;
  --blue: #1ac6ff;
  --blue-tint: #e8f9ff;
  --blue-tint-soft: #e8f6fa;
  --green: #81cf33;
  --green-tint: #f2faea;
  --green-tint-soft: #edf7e4;
  --orange: #f99539;
  --orange-tint: #fef4eb;
  --orange-tint-soft: #fcf1e6;
  --lavender: #e9d8ff;
  --surface: var(--white);
  --surface-page: var(--grey-50);
  --surface-muted: var(--grey-100);
  --surface-inverse: var(--grey-800);
  --ink: var(--grey-800);
  --ink-strong: var(--grey-900);
  --ink-muted: var(--grey-500);
  --ink-inverse: var(--grey-50);
  --ink-inverse-hover: var(--grey-200);
  --rule: var(--grey-200);
  --hover-wash: rgba(55,53,59,0.07);
  --highlight: var(--lavender);
  --pillar-skills: var(--blue);
  --pillar-skills-tint: var(--blue-tint);
  --pillar-skills-tint-soft: var(--blue-tint-soft);
  --pillar-ai: var(--green);
  --pillar-ai-tint: var(--green-tint);
  --pillar-ai-tint-soft: var(--green-tint-soft);
  --pillar-energy: var(--orange);
  --pillar-energy-tint: var(--orange-tint);
  --pillar-energy-tint-soft: var(--orange-tint-soft);
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-120: 120px;
  --gutter: 45px;
  --section-y: 120px;
  --button-padding: 16px 26px;
  --button-lg-padding: 18px 35px;
  --highlight-overhang: 10px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-16: 16px;
  --radius-30: 30px;
  --radius-pill: 999px;
  --radius-circle: 50%;
  --shadow-button: 0 0 50px rgba(0,0,0,0.1);
  --glow-skills: 0 0 48px 0 rgba(116,156,169,0.3);
  --glow-ai: 0 4px 48px 0 rgba(133,147,103,0.3);
  --glow-energy: 0 0 48px 0 rgba(173,130,91,0.3);
  --container-wide: 1400px;
  --container: 1200px;
  --container-narrow: 800px;
  --measure-lede: 760px;
  --measure-note: 520px;
  --card-min: 240px;
  --mark-size: 42px;
  --disc-size: 45px;
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-text: "Inter", system-ui, sans-serif;
  --font-ui: "Poppins", system-ui, sans-serif;
  --display-xl-size: 80px;
  --display-xl-leading: 88px;
  --display-lg-size: 44px;
  --display-lg-leading: 52px;
  --display-md-size: 40px;
  --display-md-leading: 50px;
  --title-size: 18px;
  --title-leading: 24px;
  --eyebrow-size: 16px;
  --eyebrow-leading: 24px;
  --wordmark-size: 22px;
  --wordmark-leading: 28px;
  --nav-size: 18px;
  --nav-leading: 24px;
  --body-xl-size: 22px;
  --body-xl-leading: 32px;
  --body-lg-size: 20px;
  --body-lg-leading: 30px;
  --body-md-size: 18px;
  --body-md-leading: 30px;
  --body-sm-size: 16px;
  --body-sm-leading: 24px;
  --ui-size: 16px;
  --ui-leading: 24px;
  --button-size: 18px;
  --button-leading: 24px;
  --button-lg-size: 25px;
  --button-lg-leading: 30px;
}

@media (max-width: 1200px) {
  :root {
    --section-y: 80px;
    --button-lg-padding: 15px 36px;
    --display-xl-size: 60px;
    --display-xl-leading: 65px;
    --display-lg-size: 36px;
    --display-lg-leading: 42px;
    --button-lg-size: 18px;
    --button-lg-leading: 26px;
  }
}

@media (max-width: 720px) {
  :root {
    --gutter: 24px;
    --section-y: 64px;
    --button-padding: 12px 17px;
    --button-lg-padding: 15px 24px;
    --highlight-overhang: 5px;
    --display-xl-size: 38px;
    --display-xl-leading: 45px;
    --display-lg-size: 32px;
    --display-lg-leading: 36px;
    --display-md-size: 32px;
    --display-md-leading: 40px;
    --body-xl-size: 18px;
    --body-xl-leading: 28px;
    --button-size: 14px;
    --button-lg-size: 16px;
    --button-lg-leading: 24px;
  }
}

/* Type styles */
.display-xl { font-family: var(--font-display); font-size: var(--display-xl-size); line-height: var(--display-xl-leading); font-weight: 700; }
.display-lg { font-family: var(--font-display); font-size: var(--display-lg-size); line-height: var(--display-lg-leading); font-weight: 700; }
.display-md { font-family: var(--font-display); font-size: var(--display-md-size); line-height: var(--display-md-leading); font-weight: 700; }
.title { font-family: var(--font-display); font-size: var(--title-size); line-height: var(--title-leading); font-weight: 700; }
.eyebrow { font-family: var(--font-display); font-size: var(--eyebrow-size); line-height: var(--eyebrow-leading); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.wordmark { font-family: var(--font-display); font-size: var(--wordmark-size); line-height: var(--wordmark-leading); font-weight: 700; }
.nav { font-family: var(--font-display); font-size: var(--nav-size); line-height: var(--nav-leading); font-weight: 500; }
.body-xl { font-family: var(--font-text); font-size: var(--body-xl-size); line-height: var(--body-xl-leading); font-weight: 400; }
.body-lg { font-family: var(--font-text); font-size: var(--body-lg-size); line-height: var(--body-lg-leading); font-weight: 400; }
.body-md { font-family: var(--font-text); font-size: var(--body-md-size); line-height: var(--body-md-leading); font-weight: 400; }
.body-sm { font-family: var(--font-text); font-size: var(--body-sm-size); line-height: var(--body-sm-leading); font-weight: 400; }
.ui { font-family: var(--font-ui); font-size: var(--ui-size); line-height: var(--ui-leading); font-weight: 400; }
.button { font-family: var(--font-ui); font-size: var(--button-size); line-height: var(--button-leading); font-weight: 400; }
.button-lg { font-family: var(--font-ui); font-size: var(--button-lg-size); line-height: var(--button-lg-leading); font-weight: 400; }