/* ══════════════════════════════════════════════════════════════════
   Co-Aligned — Brand Layer (placeholder)

   This site is wired up to the layered design language but the brand
   is not yet implemented in code. Until then, neutral monochrome
   fallback tokens keep the page rendering cleanly.

   To brand this site, add a design/coaligned/ folder mirroring
   design/fit/ and replace this :root block with the brand's tokens
   per design/usage.md § 3 CSS Architecture.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* Surfaces */
  --bg-page: #ffffff;
  --bg-warm: #f5f5f5;
  --bg-elevated: #f0f0f0;
  --bg-hover: #eaeaea;
  --bg-inverted: #1a1a1a;

  /* Warm signal — neutral until the brand chooses a hue */
  --accent-warm-50: #f5f5f5;
  --accent-warm-100: #eaeaea;
  --accent-warm-200: #d0d0d0;
  --accent-warm-400: #a0a0a0;
  --accent-warm-600: #707070;

  /* Text */
  --text-primary: #000000;
  --text-heading: #1a1a1a;
  --text-body: #404040;
  --text-secondary: #666666;
  --text-tertiary: #999999;
  --text-on-dark: #e0e0e0;

  /* Grays */
  --gray-50: #f5f5f5;
  --gray-100: #eaeaea;
  --gray-200: #d0d0d0;
  --gray-300: #b0b0b0;
  --gray-400: #888888;
  --gray-500: #666666;
  --gray-700: #3a3a3a;
  --gray-900: #1a1a1a;
  --black: #000000;

  /* Borders */
  --border-default: #eaeaea;
  --border-strong: #d0d0d0;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Typography — system fonts until the brand chooses families */
  --font-display: Georgia, "Times New Roman", serif;
  --font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", Consolas, "Liberation Mono", monospace;

  --text-hero-size: 4rem;
  --text-hero-weight: 400;
  --text-display-size: 2.75rem;
  --text-h1-size: 2rem;
  --text-h2-size: 1.5rem;
  --text-h3-size: 1.25rem;
  --text-body-size: 1rem;
  --text-small-size: 0.875rem;
  --text-badge-size: 0.75rem;

  /* Transitions */
  --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 400ms;
}