/**
 * Xenopz Design System - CSS Custom Properties (Tokens)
 * ======================================================
 *
 * This file defines the complete set of design tokens as CSS custom properties.
 * These tokens are the source of truth for the Xenopz visual identity and must
 * match the values configured in theme.json.
 *
 * Reference: .kiro/steering/xenopz-one-page-visual-design-system.md
 * Requirements: 2.1, 2.3, 2.4
 */

:root {
  /* =========================================================================
     COLORS - Backgrounds
     ========================================================================= */
  --x-bg-warm: #F6EEDC;        /* Main page background — warm beige canvas */
  --x-bg-card: #FFF4DD;        /* Illustrated card background */
  --x-bg-soft: #F9F1E4;        /* Alternating section background */

  /* =========================================================================
     COLORS - Primary Palette
     ========================================================================= */
  --x-teal-900: #073B44;       /* Primary heading / footer / buttons */
  --x-teal-700: #0E5963;       /* Secondary teal / hover states */
  --x-orange-500: #F26A1B;     /* Emphasis / CTA / highlights */
  --x-orange-700: #C94E0B;     /* Hover / strong accent */
  --x-green-600: #2F7D5B;      /* Success / validation indicators */
  --x-bluegray-500: #6F8D98;   /* Muted technical detail */

  /* =========================================================================
     COLORS - Text
     ========================================================================= */
  --x-ink: #102D34;            /* Body text */
  --x-muted: #5E6D70;          /* Captions / secondary text */
  --x-white: #FFFFFF;          /* White text on dark backgrounds */

  /* =========================================================================
     COLORS - Structure
     ========================================================================= */
  --x-border: #D9C6A5;         /* Card borders — warm brown */

  /* =========================================================================
     SPACING SCALE
     ========================================================================= */
  --x-space-xs: 0.5rem;        /* 8px */
  --x-space-sm: 1rem;          /* 16px */
  --x-space-md: 1.5rem;        /* 24px */
  --x-space-lg: 2.5rem;        /* 40px */
  --x-space-xl: 4rem;          /* 64px */
  --x-space-2xl: 6rem;         /* 96px */

  /* =========================================================================
     BORDER RADIUS
     ========================================================================= */
  --x-radius-sm: 10px;         /* Small elements, code blocks */
  --x-radius-md: 18px;         /* Cards, panels */
  --x-radius-lg: 28px;         /* Large cards, hero sections */

  /* =========================================================================
     SHADOWS
     ========================================================================= */
  --x-shadow-card: 0 4px 16px rgba(7, 59, 68, 0.08);
  --x-shadow-hover: 0 8px 24px rgba(7, 59, 68, 0.12);

  /* =========================================================================
     TYPOGRAPHY
     ========================================================================= */
  --x-font-heading: 'Barlow Condensed', sans-serif;
  --x-font-body: 'Inter', sans-serif;
  --x-font-code: 'JetBrains Mono', monospace;
}