/*
 * TripleWin Design System Tokens
 * Single source of truth for colors, fonts, spacing, and radii.
 * Loaded globally in all layouts — page CSS files reference these variables.
 *
 * Naming: --tw-* prefix (TripleWin) to avoid collisions.
 * Backward-compatible aliases included for existing variable names.
 */

:root {
  /* === Colors === */
  --tw-primary: #e5ee80;
  --tw-primary-hover: #d5de70;
  --tw-text: #333136;
  --tw-text-secondary: #4b5563;
  --tw-bg: #ffffff;
  --tw-bg-alt: #f9fafb;
  --tw-border: #f3f4f6;
  --tw-border-input: #e5e7eb;

  /* === Fonts === */
  --tw-font-heading:
    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  --tw-font-body:
    'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
    sans-serif;
  --tw-font-logo: 'Helvetica', Arial, sans-serif;

  /* === Border Radius === */
  --tw-radius-card: 1rem;
  --tw-radius-input: 0.75rem;
  --tw-radius-button: 0.5rem;
  --tw-radius-badge: 50px;

  /* === Layout === */
  --tw-container-max: 1280px;
  --tw-container-padding: 1.5rem;

  /* === Shadows === */
  --tw-shadow-card:
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --tw-shadow-xl:
    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

  /* === Backward-compatible aliases === */
  /* Used by page CSS files (blog-index.css, about.css, contact.css) */
  --primary-color: var(--tw-primary);
  --text-color: var(--tw-text);
  --border-color: var(--tw-border);
  --white: var(--tw-bg);

  /* Used by home.css */
  --color-primary: var(--tw-primary);
  --color-text: var(--tw-text);
  --color-bg: var(--tw-bg);
  --color-gray-light: #f8f8f8;
  --font-heading: var(--tw-font-heading);
  --font-body: var(--tw-font-body);
  --font-logo: var(--tw-font-logo);
}