/* Design tokens — generated from the Imaginary People design system (tokens/*.css). Edit there, re-export. */

/* ---- fonts.css ---- */
/* PLACEHOLDER FONTS — Comfortaa (headings) + DM Sans (body).
   To swap: replace this import (or add @font-face rules for the final files)
   and update --font-heading / --font-body in typography.css. Nothing else changes. */
@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;600;700&family=DM+Sans:opsz,wght@9..40,200;9..40,400;9..40,500;9..40,600;9..40,700&display=swap");

/* ---- colors.css ---- */
:root {
  /* Brand */
  --color-brand-teal: #00D6C4;
  --color-brand-blue: #3F8AD8;
  --gradient-brand: linear-gradient(135deg, var(--color-brand-teal) 0%, var(--color-brand-blue) 100%);

  /* Navy / ink ramp */
  --color-navy-900: #06232F;
  --color-navy-850: #06303F;
  --color-navy-800: #0A2A3A;
  --color-navy-700: #0E3A4C;
  --color-slate-600: #23414F;
  --color-slate-500: #3B5968;

  /* Teal accents */
  --color-teal-800: #063F55;
  --color-teal-700: #0A6E86;
  --color-teal-600: #0A5C7A;
  --color-teal-200: #8FD9E3;
  --color-teal-100: #CFE6EC;

  /* Neutrals */
  --color-white: #FFFFFF;
  --color-mist-50: #F4F8F9;
  --color-mist-200: #DCE7EA;
  --color-black-900: #111111;

  /* Semantic — surfaces */
  --surface-page: var(--color-mist-50);
  --surface-card: var(--color-white);
  --surface-inverse: var(--color-navy-900);
  --surface-inverse-raised: var(--color-navy-700);
  --surface-brand: var(--gradient-brand);
  --surface-image-fallback: var(--color-black-900);
  --border-subtle: var(--color-mist-200);

  /* Semantic — text */
  --text-primary: var(--color-navy-800);
  --text-secondary: var(--color-slate-600);
  --text-tertiary: var(--color-slate-500);
  --text-accent: var(--color-teal-700);
  --text-on-inverse: var(--color-white);
  --text-on-inverse-muted: var(--color-teal-100);
  --text-accent-on-inverse: var(--color-teal-200);
  --text-on-brand: var(--color-navy-900);
  --text-on-brand-muted: var(--color-navy-850);
  --link: var(--color-teal-600);
  --link-hover: var(--color-teal-800);

  /* Semantic — buttons */
  --button-primary-bg: var(--color-navy-900);
  --button-primary-fg: var(--color-white);
  --button-secondary-bg: var(--color-white);
  --button-secondary-fg: var(--color-navy-900);
  --button-nav-bg: var(--color-navy-800);
}

/* ---- typography.css ---- */
:root {
  /* PLACEHOLDER families — swap here only */
  --font-heading: "Comfortaa", "DM Sans", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, sans-serif;
  --font-wordmark: var(--font-body);

  /* Weights */
  --weight-light: 200;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Heading scale (Comfortaa 700) */
  --text-display: 68px;   /* hero h1 */
  --text-h2-xl: 52px;     /* contact band */
  --text-h2: 46px;        /* section headings */
  --text-h3: 34px;        /* feature card title */
  --text-h4: 28px;        /* CTA card title */
  --text-h5: 26px;        /* hub code */
  --text-h6: 24px;        /* service / team card title, client names */

  /* Body scale (DM Sans) */
  --text-lead: 21px;
  --text-body-xl: 20px;
  --text-body-lg: 19px;
  --text-body: 18px;
  --text-body-md: 17px;
  --text-body-sm: 16px;
  --text-small: 15px;
  --text-eyebrow: 14px;
  --text-eyebrow-sm: 13px;
  --text-wordmark: 28px;
  --text-wordmark-sm: 22px;

  /* Line heights */
  --leading-display: 1.08;
  --leading-heading: 1.15;
  --leading-snug: 1.2;
  --leading-cta: 1.25;
  --leading-body-tight: 1.55;
  --leading-body: 1.6;
  --leading-body-loose: 1.65;

  /* Tracking */
  --tracking-eyebrow: 3px;
  --tracking-wordmark: -0.5px;
}
@media (max-width: 1024px) {
  :root { --text-display: 54px; --text-h2-xl: 44px; --text-h2: 38px; --text-h3: 30px; }
}
@media (max-width: 720px) {
  :root { --text-display: 40px; --text-h2-xl: 34px; --text-h2: 30px; --text-h3: 26px; --text-lead: 18px; --text-body-lg: 17px; --text-wordmark: 24px; }
}

/* ---- spacing.css ---- */
:root {
  /* Spacing (exact values used in the source) */
  --space-4: 4px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-28: 28px;
  --space-30: 30px;
  --space-36: 36px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-80: 80px;
  --space-96: 96px;
  --space-120: 120px;

  /* Radii */
  --radius-md: 18px;    /* service image, CTA, hub, team cards */
  --radius-lg: 24px;    /* feature card, hero image (top) */
  --radius-xl: 28px;    /* contact band */
  --radius-pill: 999px; /* buttons */
  --border-width: 1px;

  /* Layout */
  --page-gutter: 80px;
  --section-pad-y: 120px;
  --hero-pad-top: 96px;
  --header-pad-y: 24px;
  --grid-gap-split: 80px;
  --measure-hero: 900px;
  --measure-lead: 720px;
  --measure-heading: 820px;
  --hero-image-h: 440px;
  --feature-image-h: 460px;
  --service-image-h: 300px;
  --feature-pad: 56px;
  --contact-pad: 80px;
}
@media (max-width: 1024px) {
  :root { --page-gutter: 40px; --section-pad-y: 96px; --hero-pad-top: 72px; --grid-gap-split: 48px; --feature-pad: 40px; --contact-pad: 56px; --hero-image-h: 360px; --feature-image-h: 380px; }
}
@media (max-width: 720px) {
  :root { --page-gutter: 20px; --section-pad-y: 64px; --hero-pad-top: 48px; --header-pad-y: 16px; --grid-gap-split: 32px; --feature-pad: 28px; --contact-pad: 32px; --hero-image-h: 260px; --feature-image-h: 260px; --service-image-h: 240px; }
}