/* Named color tokens — name = what the color is. Hex only lives here. */

:root,
[data-theme="light"] {
  --color-page-background: #f8fafc;
  --color-sky-wash: #ebf4ff;
  --color-sky-mist: #f2f8fd;
  --color-sky-fog: #f5f9ff;
  --color-lilac-wash: #f3e8ff;
  --color-ink: #1a1a1a;
  --color-slate: #4a5568;
  --color-muted: #686774;
  --color-magenta: #e91e63;
  --color-magenta-fade: #e91e6359;
  --color-magenta-mist: #f0a8c0;
  --color-violet: #8b5cf6;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray: #e5e7eb;
  --color-pink-soft: #fbe8fb;
  --color-pink-light: #e91e63;
  --color-charcoal: #ffffff;
  --color-page-glass: #f8fafeee;
  --color-shadow-soft: #53347e73;
  --color-shadow-lift: #8a0c8b80;
  --color-void: #1a1a1a;
  --color-rose: #e91e63;
  --color-chip: #1a1a1a;
  --color-chip-background: transparent;

  --gradient-sky: linear-gradient(
    180deg,
    var(--color-sky-wash) 0%,
    var(--color-white) 40%,
    var(--color-sky-mist) 100%
  );
  --gradient-magenta: linear-gradient(
    100deg,
    var(--color-magenta),
    var(--color-violet)
  );

  --pad-x: 20px;
  --section-y: 60px;
  /* Height of the fixed navbar (16px padding + 40px controls + 16px padding).
     Constant across breakpoints, so anything that starts a page can clear it. */
  --nav-h: 72px;
  --gap: 16px;
  --gap-lg: 24px;
  --content-max: 1320px;
  --shell: min(100% - (var(--pad-x) * 2), var(--content-max));

  /* Font families */
  --font-exo: "Exo 2", system-ui, sans-serif;
  --font-jakarta: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-instrument: "Instrument Serif", Georgia, serif;

  /* Font weights */
  --font-weight-thin: 200;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Font styles */
  --font-style-regular: normal;
  --font-style-italic: italic;

  /* Type roles — each has family, weight, style, size, height */
  --type-hero-title-family: var(--font-exo);
  --type-hero-title-weight: var(--font-weight-bold);
  --type-hero-title-style: var(--font-style-regular);
  --type-hero-title-size: 52px;
  --type-hero-title-height: 0.86;

  --type-hero-role-family: var(--font-exo);
  --type-hero-role-weight: var(--font-weight-bold);
  --type-hero-role-style: var(--font-style-regular);
  --type-hero-role-size: 28px;
  --type-hero-role-height: 1;

  --type-hero-lead-family: var(--font-jakarta);
  --type-hero-lead-weight: var(--font-weight-regular);
  --type-hero-lead-style: var(--font-style-regular);
  --type-hero-lead-size: 15px;
  --type-hero-lead-height: 1.7;

  --type-section-title-family: var(--font-exo);
  --type-section-title-weight: var(--font-weight-bold);
  --type-section-title-style: var(--font-style-regular);
  --type-section-title-size: 32px;
  --type-section-title-height: 0.96;

  --type-accent-title-family: var(--font-instrument);
  --type-accent-title-weight: var(--font-weight-regular);
  --type-accent-title-style: var(--font-style-italic);
  --type-accent-title-size: 24px;
  --type-accent-title-height: 1.2;

  --type-accent-word-family: var(--font-instrument);
  --type-accent-word-weight: var(--font-weight-regular);
  --type-accent-word-style: var(--font-style-italic);
  --type-accent-word-size: inherit;
  --type-accent-word-height: inherit;

  --type-lead-family: var(--font-jakarta);
  --type-lead-weight: var(--font-weight-regular);
  --type-lead-style: var(--font-style-regular);
  --type-lead-size: 15px;
  --type-lead-height: 1.7;

  --type-body-family: var(--font-jakarta);
  --type-body-weight: var(--font-weight-regular);
  --type-body-style: var(--font-style-regular);
  --type-body-size: 15px;
  --type-body-height: 1.7;

  --type-nav-family: var(--font-jakarta);
  --type-nav-weight: var(--font-weight-medium);
  --type-nav-style: var(--font-style-regular);
  --type-nav-size: 14px;
  --type-nav-height: 1.4;

  --type-button-family: var(--font-jakarta);
  --type-button-weight: var(--font-weight-semibold);
  --type-button-style: var(--font-style-regular);
  --type-button-size: 14px;
  --type-button-height: 1;

  --type-chip-family: var(--font-jakarta);
  --type-chip-weight: var(--font-weight-semibold);
  --type-chip-style: var(--font-style-regular);
  --type-chip-size: 11px;
  --type-chip-height: 1;

  --type-card-title-family: var(--font-jakarta);
  --type-card-title-weight: var(--font-weight-bold);
  --type-card-title-style: var(--font-style-regular);
  --type-card-title-size: 16px;
  --type-card-title-height: 1.3;

  --type-card-meta-family: var(--font-jakarta);
  --type-card-meta-weight: var(--font-weight-regular);
  --type-card-meta-style: var(--font-style-regular);
  --type-card-meta-size: 13px;
  --type-card-meta-height: 1.5;

  --type-card-tools-family: var(--font-jakarta);
  --type-card-tools-weight: var(--font-weight-medium);
  --type-card-tools-style: var(--font-style-regular);
  --type-card-tools-size: 13px;
  --type-card-tools-height: 1.55;

  --type-card-blurb-family: var(--font-jakarta);
  --type-card-blurb-weight: var(--font-weight-regular);
  --type-card-blurb-style: var(--font-style-regular);
  --type-card-blurb-size: 12px;
  --type-card-blurb-height: 1.6;

  --type-logo-nav-family: var(--font-exo);
  --type-logo-nav-weight: var(--font-weight-bold);
  --type-logo-nav-style: var(--font-style-regular);
  --type-logo-nav-size: 24px;
  --type-logo-nav-height: 1;

  --type-logo-footer-family: var(--font-exo);
  --type-logo-footer-weight: var(--font-weight-bold);
  --type-logo-footer-style: var(--font-style-regular);
  --type-logo-footer-size: 32px;
  --type-logo-footer-height: 1;

  --type-footer-prompt-family: var(--font-jakarta);
  --type-footer-prompt-weight: var(--font-weight-medium);
  --type-footer-prompt-style: var(--font-style-regular);
  --type-footer-prompt-size: 22px;
  --type-footer-prompt-height: 1.35;

  --type-footer-link-family: var(--font-jakarta);
  --type-footer-link-weight: var(--font-weight-medium);
  --type-footer-link-style: var(--font-style-regular);
  --type-footer-link-size: 15px;
  --type-footer-link-height: 1.4;

  --type-footer-email-family: var(--font-jakarta);
  --type-footer-email-weight: var(--font-weight-semibold);
  --type-footer-email-style: var(--font-style-regular);
  --type-footer-email-size: 15px;
  --type-footer-email-height: 1.4;

  --type-footer-credit-family: var(--font-jakarta);
  --type-footer-credit-weight: var(--font-weight-regular);
  --type-footer-credit-style: var(--font-style-regular);
  --type-footer-credit-size: 13px;
  --type-footer-credit-height: 1.5;

  --type-partners-family: var(--font-exo);
  --type-partners-weight: var(--font-weight-semibold);
  --type-partners-style: var(--font-style-regular);
  --type-partners-size: 18px;
  --type-partners-height: 1;

  --type-ui-small-family: var(--font-jakarta);
  --type-ui-small-weight: var(--font-weight-regular);
  --type-ui-small-style: var(--font-style-regular);
  --type-ui-small-size: 14px;
  --type-ui-small-height: 1.5;

  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-base: 0.42s;
}

[data-theme="dark"] {
  --color-page-background: #0f1117;
  --color-sky-wash: #1a2233;
  --color-sky-mist: #14121c;
  --color-sky-fog: #1a2233;
  --color-lilac-wash: #241b33;
  --color-ink: #f4f4f5;
  --color-slate: #a1a1aa;
  --color-muted: #8b8b96;
  --color-magenta: #f472b6;
  --color-magenta-fade: #f472b659;
  --color-magenta-mist: #f472b680;
  --color-violet: #a78bfa;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray: #27272a;
  --color-pink-soft: #3b1830;
  --color-pink-light: #f9a8d4;
  --color-charcoal: #18181b;
  --color-page-glass: #0f1117ee;
  --color-shadow-soft: #00000080;
  --color-shadow-lift: #f472b655;
  --color-void: #09090b;
  --color-rose: #db2777;
  --color-chip: #ffffff;
  --color-chip-background: transparent;

  --gradient-sky: linear-gradient(
    180deg,
    var(--color-sky-wash) 0%,
    var(--color-page-background) 40%,
    var(--color-sky-mist) 100%
  );
  --gradient-magenta: linear-gradient(
    100deg,
    var(--color-magenta),
    var(--color-violet)
  );
}

@media (min-width: 768px) {
  :root,
  [data-theme="light"],
  [data-theme="dark"] {
    --pad-x: 32px;
    --section-y: 80px;
    --gap: 24px;
    --gap-lg: 32px;

    --type-hero-title-size: 80px;
    --type-hero-role-size: 36px;
    --type-hero-lead-size: 17px;
    --type-section-title-size: 44px;
    --type-accent-title-size: 30px;
    --type-lead-size: 17px;
    --type-body-size: 17px;
    --type-card-tools-size: 14px;
    --type-card-blurb-size: 13px;
    --type-logo-footer-size: 44px;
    --type-footer-prompt-size: 30px;
  }
}

@media (min-width: 1024px) {
  :root,
  [data-theme="light"],
  [data-theme="dark"] {
    --section-y: 120px;
    --gap: 32px;
    --gap-lg: 48px;

    --type-hero-title-size: 112px;
    --type-hero-role-size: 42px;
    --type-section-title-size: 52px;
  }
}