/* Cardifficial Intelligence — design tokens + webfonts.
   Single stylesheet linked by every page. */

/* ---- Webfonts: Sora (display/wordmark), Space Mono (technical/eyebrow) ---- */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ---- Brand core ---- */
  --ci-red: #C8102E;          /* Welsh Red — Y Ddraig Goch. Primary brand colour. */
  --ci-red-bright: #FF5566;   /* Red for use on dark navy backgrounds. */
  --ci-navy: #15233B;         /* Slate Navy — primary ink + dark surface. */
  --ci-cyan: #23C9DD;         /* Circuit Cyan — AI / tech accent only. Use sparingly. */
  --ci-cyan-bright: #39E0F2;  /* Node highlight. */

  /* ---- Neutrals ---- */
  --ci-paper: #ECEAE4;        /* Warm paper — default page background. */
  --ci-paper-2: #F4F3EF;      /* Lighter paper tint. */
  --ci-white: #FFFFFF;        /* Card / surface. */
  --ci-ink-soft: #5A5648;     /* Muted warm text (eyebrows, captions). */
  --ci-ink-mute: #8A8578;     /* Faint labels. */
  --ci-line: #DDDAD2;         /* Hairlines / borders. */

  /* ---- Semantic aliases ---- */
  --color-brand: var(--ci-red);
  --color-accent: var(--ci-cyan);
  --color-ink: var(--ci-navy);
  --text-body: #3A4456;
  --text-muted: var(--ci-ink-mute);
  --text-on-dark: var(--ci-white);
  --surface-page: var(--ci-paper);
  --surface-card: var(--ci-white);
  --surface-dark: var(--ci-navy);
  --border-hairline: var(--ci-line);

  /* ---- Families ---- */
  --ci-font-display: 'Sora', system-ui, -apple-system, sans-serif;
  --ci-font-body: 'Sora', system-ui, -apple-system, sans-serif;
  --ci-font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ---- Weights ---- */
  --ci-w-regular: 400;
  --ci-w-medium: 500;
  --ci-w-semibold: 600;
  --ci-w-bold: 700;
  --ci-w-black: 800;

  /* ---- Spacing (4px base) ---- */
  --ci-space-1: 4px;
  --ci-space-2: 8px;
  --ci-space-3: 12px;
  --ci-space-4: 16px;
  --ci-space-6: 24px;
  --ci-space-8: 32px;
  --ci-space-12: 48px;
  --ci-space-16: 64px;
  --ci-space-24: 96px;

  /* ---- Radii ---- */
  --ci-radius-xs: 2px;
  --ci-radius-sm: 4px;
  --ci-radius-md: 8px;
  --ci-radius-lg: 16px;
  --ci-radius-app: 28px;
  --ci-radius-pill: 999px;

  /* ---- Shadows ---- */
  --ci-shadow-card: 0 1px 3px rgba(21,35,59,.10);
  --ci-shadow-raised: 0 6px 16px rgba(21,35,59,.14);
  --ci-shadow-brand: 0 6px 16px rgba(200,16,46,.28);
}