/*
 * DEPRECATED: Legacy variables file
 *
 * ⚠️ This file is deprecated and will be removed in Phase 3 cleanup
 *
 * MIGRATION PATH:
 * All colour, spacing, typography, and layout tokens have been moved to:
 * → base/_tokens.css (Primary source)
 *
 * If you need to add a new token:
 * 1. Add it to base/_tokens.css in the appropriate category section
 * 2. DO NOT add new variables to this file
 * 3. All new CSS should use tokens from _tokens.css
 *
 * LEGACY TOKENS → TOKENS.CSS MAPPING:
 * ──────────────────────────────────────────────────────────────────────
 * Legacy Token          →  New Token (in base/_tokens.css)
 * ──────────────────────────────────────────────────────────────────────
 * --gray-50             →  oklch(var(--lch-neutral-lightest))
 * --gray-100            →  oklch(var(--lch-neutral-lighter))
 * --gray-200            →  oklch(var(--lch-neutral-light))
 * --gray-700            →  oklch(var(--lch-neutral-dark))
 * --grid-row-height     →  --grid-row-height (same in tokens)
 * --border-radius       →  --radius-md (8px instead of 6px)
 * --brand-radius        →  --radius-md (replaces brand-specific)
 * ──────────────────────────────────────────────────────────────────────
 *
 * REMOVAL TIMELINE:
 * ✅ Phase 2 Complete: All CSS files updated to use _tokens.css
 * ✅ Phase 3 Complete: Variables.css marked deprecated (this file)
 * ⏳ Post-Phase 3: Remove after verifying no CSS references remain
 *
 * ACTION REQUIRED:
 * Run grep to find any remaining references:
 *
 *   grep -r "variables" app/assets/stylesheets/
 *
 * If results found, update those files to use _tokens.css instead
 */

/* Legacy variables (kept for reference, do not use in new code) */
:root {
  /*
   * ❌ DEPRECATED: Use oklch(var(--lch-neutral-*)) instead
   * Neutral Scale – DEPRECATED values below for backward compatibility only
   */
  --gray-50: #f9fafb;           /* → oklch(var(--lch-neutral-lightest)) */
  --gray-100: #f3f4f6;          /* → oklch(var(--lch-neutral-lighter)) */
  --gray-200: #e5e7eb;          /* → oklch(var(--lch-neutral-light)) */
  --gray-700: #374151;          /* → oklch(var(--lch-neutral-dark)) */

  /*
   * ❌ DEPRECATED: Use token equivalents from _tokens.css
   * Layout Constants – DEPRECATED
   */
  --grid-row-height: 64px;      /* Moved to _tokens.css */
  --border-radius: 6px;         /* → --radius-md (8px) */
}

/*
 * REFERENCE: Old pattern (no longer used)
 *
 * These patterns were common in the codebase before Phase 1 refactoring:
 *
 * .old-button {
 *   background: var(--gray-700);      ❌ Don't use this
 *   border-radius: var(--border-radius);  ❌ Use --radius-md instead
 * }
 *
 * NEW PATTERN (correct):
 *
 * .new-button {
 *   background-color: var(--color-primary);     ✅ Semantic colour token
 *   border-radius: var(--radius-md);            ✅ Scoped radius token
 * }
 *
 * BENEFITS OF NEW TOKENS:
 * ✅ Single source of truth (base/_tokens.css)
 * ✅ Dark mode support (automatic inversion via OKLCH)
 * ✅ Semantic naming (--color-primary vs --gray-700)
 * ✅ Perceptually uniform (OKLCH colour space)
 * ✅ Accessibility support (focus rings, contrast ratios)
 * ✅ Maintainability (design changes in one place)
 */