/* Calyx Core — merged design-system CSS (tokens + styles). Generated; edit sources in _ds/. */

/* --- tokens/fonts.css --- */
/* Webfont loading.
   The source spec calls for two proprietary families — rb-freigeist-neue
   (display) and basier-square (body/UI) — that could not be provided as
   font files. Per the spec's own substitution guidance we use Bricolage
   Grotesque (display) and Geist (body); JetBrains Mono is used directly
   since it was already open-source. Loaded from Google Fonts because no
   binaries were available to self-host in this environment — see readme.md
   "Visual Foundations > Typography" for the flag + ask to swap in real
   licensed font files later. */


/* --- tokens/colors.css --- */
/* Color tokens — base palette + semantic aliases.
   Adapted from a design-analysis reference (warm-cream / hot-orange
   editorial-developer aesthetic). See /readme.md for sourcing notes. */

:root {
  /* ---- Base palette ---- */
  --orange-600: #c01f00;
  --orange-500: #ea2804;
  --orange-400: #ff6a3d;
  --orange-200: #f4a8a0;

  --ink-900: #202020;
  --ink-700: #3a3a3a;
  --ink-600: #575757;
  --ink-500: #646464;
  --ink-400: #8d8d8d;
  --ink-300: #bbbbbb;

  --cream-100: #f9f7f3;
  --cream-200: #f3f0e8;
  --white: #ffffff;
  --black: #000000;

  --off-white-900: #fcfcfc;
  --off-white-700: rgba(252, 252, 252, 0.72);

  --green-500: #2b9a66;
  --blue-500: #3b82f6;
  --github-900: #24292e;

  /* ---- Semantic: brand ---- */
  --brand-accent: var(--orange-500);
  --brand-accent-pressed: var(--orange-600);
  --brand-accent-glow: var(--orange-400);
  --brand-accent-wash: var(--orange-200);
  --on-accent: var(--white);

  /* ---- Semantic: surface ---- */
  --surface-canvas: var(--cream-100);
  --surface-bone: var(--cream-200);
  --surface-card: var(--white);
  --surface-dark: var(--ink-900);
  --surface-deep: var(--black);

  /* ---- Semantic: text ---- */
  --text-primary: var(--ink-900);
  --text-body: var(--ink-700);
  --text-secondary: var(--ink-600);
  --text-muted: var(--ink-500);
  --text-tertiary: var(--ink-400);
  --text-disabled: var(--ink-300);
  --text-on-dark: var(--off-white-900);
  --text-on-dark-muted: var(--off-white-700);

  /* ---- Semantic: borders / dividers ---- */
  --hairline: rgba(32, 32, 32, 0.12);
  --hairline-strong: var(--ink-900);
  --divider-dark: rgba(255, 255, 255, 0.2);

  /* ---- Semantic: status ---- */
  --status-success: var(--green-500);
  --link-color: var(--orange-500);
  --ring-focus: rgba(59, 130, 246, 0.5);
  --brand-github: var(--github-900);

  /* ---- Shadows (colour-blocking system; shadows are rare) ---- */
  --shadow-thumbnail: 0 8px 24px rgba(32, 32, 32, 0.08);
}

/* --- tokens/typography.css --- */
/* Typography tokens — three-family stack, strict lanes:
   display = Bricolage Grotesque, body/UI = Geist, code = JetBrains Mono. */

:root {
  --font-display: "Bricolage Grotesque", "Migra", Georgia, serif;
  --font-body: "Geist", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Display — Bricolage Grotesque, weight 600-700, tight line-height */
  --text-display-xxl-size: 128px;
  --text-display-xxl-weight: 700;
  --text-display-xxl-leading: 1.0;
  --text-display-xxl-tracking: -3px;

  --text-display-xl-size: 72px;
  --text-display-xl-weight: 700;
  --text-display-xl-leading: 1.0;
  --text-display-xl-tracking: -1.8px;

  --text-display-lg-size: 48px;
  --text-display-lg-weight: 700;
  --text-display-lg-leading: 1.0;
  --text-display-lg-tracking: -1px;

  --text-display-md-size: 30px;
  --text-display-md-weight: 600;
  --text-display-md-leading: 1.2;
  --text-display-md-tracking: -0.5px;

  /* Headings — Geist, weight 600 */
  --text-heading-lg-size: 38.4px;
  --text-heading-lg-weight: 600;
  --text-heading-lg-leading: 0.83;
  --text-heading-lg-tracking: -0.5px;

  --text-heading-md-size: 24px;
  --text-heading-md-weight: 600;
  --text-heading-md-leading: 1.33;
  --text-heading-md-tracking: -0.35px;

  --text-heading-sm-size: 20px;
  --text-heading-sm-weight: 600;
  --text-heading-sm-leading: 1.4;
  --text-heading-sm-tracking: -0.3px;

  --text-subtitle-size: 18px;
  --text-subtitle-weight: 600;
  --text-subtitle-leading: 1.56;
  --text-subtitle-tracking: 0px;

  /* Body — Geist, weight 400 always */
  --text-body-lg-size: 18px;
  --text-body-lg-weight: 400;
  --text-body-lg-leading: 1.56;

  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.5;

  --text-body-sm-size: 14px;
  --text-body-sm-weight: 400;
  --text-body-sm-leading: 1.43;

  --text-button-md-size: 16px;
  --text-button-md-weight: 600;
  --text-button-md-leading: 1.0;

  --text-button-sm-size: 14px;
  --text-button-sm-weight: 600;
  --text-button-sm-leading: 1.0;

  --text-caption-size: 12px;
  --text-caption-weight: 400;
  --text-caption-leading: 1.33;

  --text-caption-tight-size: 14px;
  --text-caption-tight-weight: 600;
  --text-caption-tight-leading: 1.43;
  --text-caption-tight-tracking: -0.35px;

  /* Code — JetBrains Mono, weight 400 */
  --text-code-md-size: 14px;
  --text-code-md-weight: 400;
  --text-code-md-leading: 1.43;

  --text-code-sm-size: 11px;
  --text-code-sm-weight: 400;
  --text-code-sm-leading: 1.5;
}

/* --- tokens/spacing.css --- */
/* Spacing tokens — base unit 4px. */
:root {
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-xxxl: 48px;
  --space-section: 96px;
  --space-band: 160px;

  --content-max: 1280px;
  --content-max-wide: 1440px;
}

/* --- tokens/radius.css --- */
/* Corner radius scale — interactive elements are always full/pill;
   content cards step to md/lg. No sharp corners on content surfaces. */
:root {
  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;
}

/* --- tokens/shadows.css --- */
/* Elevation is mostly colour-blocking, not shadow. This is the one
   sanctioned drop shadow, reserved for photography thumbnails on hover. */
:root {
  --shadow-none: none;
  --shadow-thumbnail-hover: 0 8px 24px rgba(32, 32, 32, 0.08);
}

/* --- styles.css --- */