/* Aeros tokens — bundled so the site is self-contained (no dependency on the design-system root). */

/* ===== tokens/fonts.css ===== */
/* Aeros — webfonts.
   Display tier: Cormorant Garamond — an elegant light editorial serif (the
   real, loadable stand-in for the "Waldenburg Light" reference).
   UI tier: Inter. Mono tier: JetBrains Mono. All load from Google Fonts. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');


/* ===== tokens/colors.css ===== */
/* Aeros — Color tokens. Black, white, and the imagery itself. */
:root {
  /* Base — surface */
  --aeros-night: #000000;        /* pure black, default canvas */
  --aeros-night-soft: #0a0a0a;   /* barely-lifted near-black for separation */
  --aeros-light: #ffffff;        /* light surface (shop / docs) */
  --aeros-cool: #f0f0fa;         /* pale cool-white secondary surface */

  /* Base — hairline */
  --aeros-hairline-dark: #3a3a3f;   /* 1px borders on dark chrome */
  --aeros-hairline-light: #e0e0e8;  /* 1px borders on light cards */

  /* Base — ink */
  --aeros-white: #ffffff;
  --aeros-white-mute: #f0f0fa;   /* cooled-white, secondary on dark */
  --aeros-ink: #000000;          /* text on light */
  --aeros-ink-mute: #5a5a5f;     /* secondary text on light */

  /* Semantic — surface */
  --surface-canvas: var(--aeros-night);
  --surface-canvas-soft: var(--aeros-night-soft);
  --surface-light: var(--aeros-light);
  --surface-cool: var(--aeros-cool);
  --surface-overlay: rgba(0,0,0,0.0); /* nav/CTA sit transparent over photography */

  /* Semantic — text */
  --text-on-dark: var(--aeros-white);
  --text-on-dark-mute: var(--aeros-white-mute);
  --text-on-light: var(--aeros-ink);
  --text-on-light-mute: var(--aeros-ink-mute);

  /* Semantic — border */
  --border-on-dark: var(--aeros-hairline-dark);
  --border-on-light: var(--aeros-hairline-light);

  /* Semantic — link */
  --link-on-dark: var(--aeros-white);
  --link-on-light: var(--aeros-ink);
}


/* ===== tokens/typography.css ===== */
/* Aeros — Typography tokens.
   Display = Cormorant Garamond (elegant light serif): weight 300, large,
   tight NEGATIVE tracking, sentence case.
   UI = Inter, body at +0.16px tracking (editorial dialect). Mono = JetBrains Mono.
   The only uppercase token is caption-uppercase (eyebrows / labels). */
:root {
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-ui: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-mono: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  /* Display tier — light serif, sentence case, tight negative tracking. @kind font */
  --display-mega-size: 64px; --display-mega-weight: 300; --display-mega-lh: 1.05; /* @kind font */ --display-mega-ls: -1.92px;
  --display-xl-size: 48px;   --display-xl-weight: 300;   --display-xl-lh: 1.08; /* @kind font */  --display-xl-ls: -0.96px;
  --display-lg-size: 36px;   --display-lg-weight: 300;   --display-lg-lh: 1.17; /* @kind font */  --display-lg-ls: -0.36px;
  --display-md-size: 32px;   --display-md-weight: 300;   --display-md-lh: 1.13; /* @kind font */  --display-md-ls: -0.32px;
  --display-sm-size: 24px;   --display-sm-weight: 300;   --display-sm-lh: 1.2; /* @kind font */   --display-sm-ls: 0px;

  /* UI tier — Cormorant Garamond, light serif, sentence case @kind font */
  --title-md-size: 22px;  --title-md-weight: 400; --title-md-lh: 1.3; /* @kind font */ --title-md-ls: 0px;
  --title-sm-size: 18px;  --title-sm-weight: 400; --title-sm-lh: 1.4; /* @kind font */ --title-sm-ls: 0px;
  --body-md-size: 17px;   --body-md-weight: 400;  --body-md-lh: 1.5; /* @kind font */ --body-md-ls: 0px;
  --body-strong-size: 17px; --body-strong-weight: 500; --body-strong-lh: 1.5; /* @kind font */ --body-strong-ls: 0px;
  --body-sm-size: 15px;   --body-sm-weight: 400;  --body-sm-lh: 1.47; /* @kind font */ --body-sm-ls: 0px;
  --caption-size: 14px;   --caption-weight: 400;  --caption-lh: 1.5; /* @kind font */ --caption-ls: 0px;
  --code-size: 15px;      --code-weight: 400;     --code-lh: 1.6; /* @kind font */ --code-ls: 0px;

  /* All-caps eyebrow / nav / labels @kind font */
  --caption-uppercase-size: 13px; --caption-uppercase-weight: 500; --caption-uppercase-lh: 1.4; /* @kind font */ --caption-uppercase-ls: 1.2px;
  --button-size: 16px;    --button-weight: 500;   --button-lh: 1.0; /* @kind font */ --button-ls: 0px;
  --nav-link-size: 16px;  --nav-link-weight: 500;  --nav-link-lh: 1.4; /* @kind font */ --nav-link-ls: 0px;
}

/* Convenience classes */
.aeros-display-mega { font-family: var(--font-display); font-size: var(--display-mega-size); font-weight: var(--display-mega-weight); line-height: var(--display-mega-lh); letter-spacing: var(--display-mega-ls); }
.aeros-display-xl   { font-family: var(--font-display); font-size: var(--display-xl-size);   font-weight: var(--display-xl-weight);   line-height: var(--display-xl-lh);   letter-spacing: var(--display-xl-ls); }
.aeros-display-lg   { font-family: var(--font-display); font-size: var(--display-lg-size);   font-weight: var(--display-lg-weight);   line-height: var(--display-lg-lh);   letter-spacing: var(--display-lg-ls); }
.aeros-display-md   { font-family: var(--font-display); font-size: var(--display-md-size);   font-weight: var(--display-md-weight);   line-height: var(--display-md-lh);   letter-spacing: var(--display-md-ls); }
.aeros-display-sm   { font-family: var(--font-display); font-size: var(--display-sm-size);   font-weight: var(--display-sm-weight);   line-height: var(--display-sm-lh);   letter-spacing: var(--display-sm-ls); }
.aeros-title-md     { font-family: var(--font-ui); font-size: var(--title-md-size); font-weight: var(--title-md-weight); line-height: var(--title-md-lh); }
.aeros-body         { font-family: var(--font-ui); font-size: var(--body-md-size); font-weight: var(--body-md-weight); line-height: var(--body-md-lh); letter-spacing: var(--body-md-ls); }
.aeros-caption      { font-family: var(--font-ui); font-size: var(--caption-size); font-weight: var(--caption-weight); line-height: var(--caption-lh); }
.aeros-caption-uppercase { font-family: var(--font-ui); font-size: var(--caption-uppercase-size); font-weight: var(--caption-uppercase-weight); line-height: var(--caption-uppercase-lh); letter-spacing: var(--caption-uppercase-ls); text-transform: uppercase; }
.aeros-code         { font-family: var(--font-mono); font-size: var(--code-size); font-weight: var(--code-weight); line-height: var(--code-lh); }
.aeros-button       { font-family: var(--font-ui); font-size: var(--button-size); font-weight: var(--button-weight); line-height: var(--button-lh); }
.aeros-nav-link     { font-family: var(--font-ui); font-size: var(--nav-link-size); font-weight: var(--nav-link-weight); line-height: var(--nav-link-lh); }


/* ===== tokens/spacing.css ===== */
/* Aeros — Spacing, radius, layout tokens. Base unit 8px. */
:root {
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 18px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-huge: 48px;
  --space-mega: 64px;

  --radius-xs: 4px;     /* form inputs */
  --radius-sm: 8px;     /* product cards, video frames */
  --radius-md: 16px;    /* larger surface chrome */
  --radius-pill: 32px;  /* ghost pill CTA — signature button */
  --radius-full: 9999px;/* circular play overlays */

  --reading-column: 1200px;  /* centered type column over full-bleed photo */
}