/**
 * Snout & About Pet Care - Design Tokens
 * Version: 1.0.0
 *
 * This file contains all design tokens (CSS custom properties) for the
 * Snout & About Pet Care design system. These tokens provide a single
 * source of truth for colors, typography, spacing, shadows, and more.
 *
 * Usage: Reference tokens via var(--token-name)
 * Example: color: var(--color-primary);
 */

:root {
  /* ============================================
     COLOR TOKENS
     ============================================ */

  /* Brand Colors - Core */
  --color-primary: #316563;           /* Dark Teal - Primary brand color */
  --color-primary-hover: #264c4a;     /* Darker teal for hover states */
  --color-primary-light: #448d8a;     /* Medium Teal - Lighter variant */

  --color-secondary: #9dbb9f;         /* Sage Green - Secondary actions */
  --color-secondary-hover: #8aad8c;   /* Darker sage for hover */

  --color-accent: #75908c;            /* Mist - Accent elements */
  --color-neutral: #b5bfb5;           /* Stone - Borders, dividers */

  --color-background: #eae7d8;        /* Cream - Page backgrounds */
  --color-surface: #ffffff;           /* White - Card/modal surfaces */

  /* Primary Teal Scale (50-900) */
  --color-primary-50: #e8f1f0;
  --color-primary-100: #c5dcd9;
  --color-primary-200: #9fc5c1;
  --color-primary-300: #79aea9;
  --color-primary-400: #5c9c96;
  --color-primary-500: #316563;       /* Base primary */
  --color-primary-600: #2b5855;
  --color-primary-700: #234946;
  --color-primary-800: #1c3a38;
  --color-primary-900: #0f1f1e;

  /* Sage Green Scale (50-900) */
  --color-sage-50: #f2f6f3;
  --color-sage-100: #dfeadf;
  --color-sage-200: #c9dcc9;
  --color-sage-300: #b3cdb4;
  --color-sage-400: #a3c4a4;
  --color-sage-500: #9dbb9f;          /* Base sage */
  --color-sage-600: #8aad8c;
  --color-sage-700: #6f8f71;
  --color-sage-800: #567158;
  --color-sage-900: #3e5340;

  /* Text Colors */
  --color-text-primary: #223;         /* Primary text */
  --color-text-secondary: #556;       /* Secondary text */
  --color-text-muted: #778;           /* Muted/disabled text */
  --color-text-inverse: #ffffff;      /* Text on dark backgrounds */

  /* Semantic Colors */
  --color-success: #2e7d32;           /* Success states */
  --color-success-light: #c8e6c9;     /* Success backgrounds */
  --color-success-dark: #1b5e20;      /* Success text on light bg */

  --color-warning: #f9a825;           /* Warning states */
  --color-warning-light: #fff9c4;     /* Warning backgrounds */
  --color-warning-dark: #b36700;      /* Warning text on light bg */

  --color-error: #c62828;             /* Error states */
  --color-error-light: #ffcdd2;       /* Error backgrounds */
  --color-error-dark: #8e0000;        /* Error text on light bg */

  --color-info: #0277bd;              /* Info states */
  --color-info-light: #b3e5fc;        /* Info backgrounds */
  --color-info-dark: #01579b;         /* Info text on light bg */

  /* ============================================
     TYPOGRAPHY TOKENS
     ============================================ */

  /* Font Families */
  --font-primary: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Consolas', 'Monaco', 'Courier New', monospace;

  /* Font Sizes - Mobile First Type Scale */
  --text-xs: 0.75rem;      /* 12px - Fine print, labels */
  --text-sm: 0.875rem;     /* 14px - Small text, captions */
  --text-base: 1rem;       /* 16px - Body text (default) */
  --text-lg: 1.125rem;     /* 18px - Emphasized text */
  --text-xl: 1.25rem;      /* 20px - Subheadings */
  --text-2xl: 1.5rem;      /* 24px - Section headings */
  --text-3xl: 2rem;        /* 32px - Page headings */
  --text-4xl: 2.5rem;      /* 40px - Hero headings */
  --text-5xl: 3rem;        /* 48px - Large displays */

  /* Line Heights */
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* ============================================
     SPACING TOKENS (4px Grid)
     ============================================ */

  --space-0: 0;
  --space-1: 0.25rem;      /* 4px */
  --space-2: 0.5rem;       /* 8px */
  --space-3: 0.75rem;      /* 12px */
  --space-4: 1rem;         /* 16px */
  --space-5: 1.25rem;      /* 20px */
  --space-6: 1.5rem;       /* 24px */
  --space-8: 2rem;         /* 32px */
  --space-10: 2.5rem;      /* 40px */
  --space-12: 3rem;        /* 48px */
  --space-16: 4rem;        /* 64px */
  --space-20: 5rem;        /* 80px */
  --space-24: 6rem;        /* 96px */

  /* ============================================
     BORDER RADIUS TOKENS
     ============================================ */

  --radius-none: 0;
  --radius-sm: 0.25rem;    /* 4px - Small elements, badges */
  --radius-md: 0.5rem;     /* 8px - Inputs, buttons, cards */
  --radius-lg: 0.75rem;    /* 12px - Large cards */
  --radius-xl: 1rem;       /* 16px - Modals, dialogs */
  --radius-2xl: 1.5rem;    /* 24px - Hero sections */
  --radius-full: 9999px;   /* Pills, avatars, circular buttons */

  /* ============================================
     SHADOW TOKENS (Elevation System)
     ============================================ */

  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 16px 0 rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 32px 0 rgba(0, 0, 0, 0.15);
  --shadow-2xl: 0 24px 48px 0 rgba(0, 0, 0, 0.2);

  /* Focus Ring */
  --shadow-focus: 0 0 0 3px rgba(49, 101, 99, 0.25);
  --shadow-focus-error: 0 0 0 3px rgba(198, 40, 40, 0.25);

  /* ============================================
     TRANSITION TOKENS
     ============================================ */

  /* Duration */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 350ms;

  /* Easing Functions */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Combined Transitions */
  --transition-fast: all var(--duration-fast) var(--ease-out);
  --transition-base: all var(--duration-base) var(--ease-out);
  --transition-slow: all var(--duration-slow) var(--ease-out);

  /* ============================================
     Z-INDEX TOKENS (Layering)
     ============================================ */

  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* ============================================
     BREAKPOINT TOKENS
     ============================================ */

  --screen-sm: 576px;      /* Small devices (landscape phones) */
  --screen-md: 768px;      /* Medium devices (tablets) */
  --screen-lg: 992px;      /* Large devices (desktops) */
  --screen-xl: 1200px;     /* Extra large devices */
  --screen-xxl: 1400px;    /* Extra extra large devices */
}

/* ============================================
   LEGACY TOKEN ALIASES (for backward compatibility)
   These map old variable names to new design tokens
   TODO: Remove after migration is complete
   ============================================ */

:root {
  /* Old admin dashboard variables */
  --light-yellow: var(--color-background);
  --gray-cyan: var(--color-primary);
  --gray-turquoise: var(--color-accent);
  --pastel-gray-green: var(--color-neutral);
  --gray-green: var(--color-secondary);
  --deep-teal: var(--color-primary-light);

  /* Old public site variables */
  --cream: var(--color-background);
  --dark-green: var(--color-primary);
  --medium-green: var(--color-primary-light);
  --light-green: var(--color-secondary);
  --light-gray: var(--color-neutral);
  --white: var(--color-surface);
  --black: var(--color-text-primary);

  /* Old shadow variable */
  --shadow: var(--shadow-sm);

  /* Old transition variable */
  --transition: var(--transition-base);
}