/*
 * Design tokens: the single source of truth for colors, fonts, the type
 * scale, and layout sizes. Components reference these; they never hard-code
 * a color or font.
 */

:root {
  /* Neutrals */
  --color-ink: #484848;
  --color-ink-strong: #2c2c2c;
  --color-paper: #f7f7f7;
  --color-paper-dim: #e2e2e2;
  --color-white: #ffffff;
  --color-hover-tint: rgba(55, 53, 59, 0.07);
  --color-highlight: #e9d8ff;

  /* Pillar accents (also used in the logo) */
  --color-skills: #1ac6ff;
  --color-skills-tint: #e8f9ff;
  --color-ai: #81cf33;
  --color-ai-tint: #f2faea;
  --color-energy: #f99539;
  --color-energy-tint: #fef4eb;

  /* Fonts. Poppins stands in for the design font, Geomanist. */
  --font-base: "Poppins", sans-serif;
  --font-display: "Plus Jakarta Sans", sans-serif;
  --font-body: "Inter", sans-serif;

  /* Type scale: size and line height per step, adjusted at breakpoints below */
  --display-xl-size: 80px;
  --display-xl-leading: 88px;
  --display-lg-size: 44px;
  --display-lg-leading: 52px;
  --display-md-size: 40px;
  --display-md-leading: 50px;
  --body-xl-size: 22px;
  --body-xl-leading: 32px;
  --body-lg-size: 20px;
  --body-lg-leading: 30px;
  --body-md-size: 18px;
  --body-md-leading: 30px;

  /* Layout */
  --container-wide: 1400px;
  --container-default: 1200px;
  --container-narrow: 800px;
  --gutter: 45px;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 30px;
}

/* Breakpoints: 1200px (tablet) and 720px (phone). Keep in sync with components.css. */
@media (max-width: 1200px) {
  :root {
    --display-xl-size: 60px;
    --display-xl-leading: 65px;
    --display-lg-size: 36px;
    --display-lg-leading: 42px;
  }
}

@media (max-width: 720px) {
  :root {
    --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;
  }
}

/*
 * Accent themes: set on a component to color it by pillar.
 * Components read --accent and --accent-tint.
 */
.accent-skills {
  --accent: var(--color-skills);
  --accent-tint: var(--color-skills-tint);
}

.accent-ai {
  --accent: var(--color-ai);
  --accent-tint: var(--color-ai-tint);
}

.accent-energy {
  --accent: var(--color-energy);
  --accent-tint: var(--color-energy-tint);
}