/**
 * Design Tokens - Rhuarc's Pet Supplies
 *
 * Central design system variables for consistent styling across the site.
 * Purple (#5C1F71) is the primary brand color with warm supporting neutrals.
 *
 * @package RhuarcsPetSupplies
 * @since 2.1.0
 */

/* Phase 1 FOUND-01 (D-01): :root and the @media (prefers-contrast: high)
   override are wrapped in @layer tokens so token declarations sit at the
   second-lowest precedence layer. The JSDoc header remains outside the
   @layer block. */
@layer tokens {
:root {
  /* ==========================================================================
     PRIMARY PURPLE PALETTE - BRAND CENTRAL
     ========================================================================== */
  --purple-900: #3D1549;
  --purple-800: #4A1A5A;
  --purple-700: #5C1F71;  /* PRIMARY BRAND COLOR */
  --purple-600: #7B2B85;
  --purple-500: #9B3FA0;
  --purple-400: #B55FBF;
  --purple-300: #D080D0;
  --purple-200: #E8B0E8;
  --purple-100: #F5E0F5;
  --purple-50: #FBF3FB;

  /* Purple Gradients */
  --gradient-purple: linear-gradient(135deg, var(--purple-700) 0%, var(--purple-600) 50%, var(--purple-500) 100%);
  --gradient-purple-subtle: linear-gradient(135deg, var(--purple-700) 0%, var(--purple-600) 100%);
  --gradient-purple-dark: linear-gradient(135deg, var(--purple-900) 0%, var(--purple-800) 100%);

  /* ==========================================================================
     WARM NEUTRALS - Supporting Colors
     ========================================================================== */
  --cream-100: #FFFDF9;
  --cream-200: #FDF8F3;
  --cream-300: #F8F1E8;
  --sand-100: #F5EDE4;
  --sand-200: #E8DDD0;
  --sand-300: #D9CEC0;

  /* ==========================================================================
     TEXT COLORS
     ========================================================================== */
  --text-primary: #2D2926;
  --text-secondary: #5A5550;
  --text-muted: #6c6862;
  --text-light: #A8A4A0;
  --text-on-purple: #FFFFFF;
  --text-on-dark: #F5F5F5;

  /* ==========================================================================
     ACCENT COLORS - Animal Categories
     ========================================================================== */
  --accent-dog: #C4856A;
  --accent-cat: #8FAE8B;
  --accent-bird: #E8B14C;
  --accent-fish: #6BA3C4;
  --accent-reptile: #8B9A6B;
  --accent-small-animal: #C49A6B;
  --accent-rabbit: #D4A89A;
  --accent-snake: #7A8B6B;

  /* ==========================================================================
     FUNCTIONAL COLORS
     ========================================================================== */
  --success: #4CAF50;
  --success-light: #E8F5E9;
  --warning: #FF9800;
  --warning-light: #FFF3E0;
  --error: #E53935;
  --error-light: #FFEBEE;
  --info: #2196F3;
  --info-light: #E3F2FD;

  /* Stock Status */
  --in-stock: #4CAF50;
  --in-stock-bg: #E8F5E9;
  --low-stock: #FF9800;
  --low-stock-bg: #FFF3E0;
  --out-of-stock: #E53935;
  --out-of-stock-bg: #FFEBEE;

  /* Alert/Badge Text Colors (WCAG AA compliant) */
  --warning-text: #B36B00;
  --success-text: #1B5E20;
  --error-text: #B71C1C;
  --info-text: #0D47A1;

  /* Store Open/Closed Status (contact-bar only)
     Deliberately LIGHT pastels — contrast-tuned for legible status text against
     the DARK purple-700 contact bar surface (NOT the alarm-semantic
     --success/--error families, which are mid-tone and would lose legibility on
     purple). Distinct open/closed semantic + ≥3× reuse (4 sites in
     contact-bar.css: open/closed header color + open/closed status-dot
     background) justifies the new token (D-06/D9-01). Held BYTE-EXACT to the
     prior literals (#90EE90 / #FFB6C1) for zero visual delta — this is the only
     pair of new tokens minted in Phase 9. */
  --status-open: #90EE90;
  --status-closed: #FFB6C1;

  /* Bootstrap-compatible neutrals (for legacy support) */
  --neutral-50: #f8f9fa;
  --neutral-100: #f1f3f5;
  --neutral-200: #e9ecef;
  --neutral-300: #dee2e6;
  --neutral-400: #ced4da;
  --neutral-500: #adb5bd;
  --neutral-600: #6c757d;
  --neutral-700: #495057;
  --neutral-800: #343a40;
  --neutral-900: #212529;

  /* ==========================================================================
     BORDERS
     ========================================================================== */
  --border-light: #E8E4E0;
  --border-medium: #D9D5D0;
  --border-dark: #C0BCB8;
  --border-purple: var(--purple-200);
  --border-purple-strong: var(--purple-400);

  /* ==========================================================================
     SHADOWS
     ========================================================================== */
  --shadow-xs: 0 1px 2px rgba(45, 41, 38, 0.05);
  --shadow-sm: 0 1px 3px rgba(45, 41, 38, 0.08);
  --shadow-md: 0 4px 12px rgba(45, 41, 38, 0.10);
  --shadow-lg: 0 8px 30px rgba(45, 41, 38, 0.12);
  --shadow-xl: 0 16px 50px rgba(45, 41, 38, 0.15);

  /* Derived purple hover/active states via color-mix (replaces rgba overlay pattern).
     Fallback browsers that don't support color-mix() see no tint — acceptable degradation. */
  --purple-700-hover:      color-mix(in oklch, var(--purple-700) 85%, white);
  --purple-700-active:     color-mix(in oklch, var(--purple-700) 80%, white);
  --purple-700-focus-ring: color-mix(in oklch, var(--purple-700) 75%, white);

  /* Purple-tinted shadows for brand elements */
  --shadow-purple-sm: 0 2px 8px rgba(92, 31, 113, 0.15);
  --shadow-purple-md: 0 4px 20px rgba(92, 31, 113, 0.20);
  --shadow-purple-lg: 0 8px 30px rgba(92, 31, 113, 0.25);
  --shadow-purple-xl: 0 12px 40px rgba(92, 31, 113, 0.30);

  /* ==========================================================================
     BORDER RADIUS
     ========================================================================== */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 50px;
  --radius-circle: 50%;

  /* ==========================================================================
     SPACING SCALE
     ========================================================================== */
  --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 */

  /* ==========================================================================
     TYPOGRAPHY
     ========================================================================== */
  /* Font Families */
  --font-display: 'Filson Pro', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Monaco', 'Consolas', monospace;

  /* Font Sizes */
  --text-xs: 0.75rem;     /* 12px */
  --text-btn: 0.8125rem;  /* 13px — .btn default; locked by 05.5-UI-SPEC.md §Button Typography */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  /* Responsive body sizes — element-default overrides at breakpoints (FOUND-02).
     Consumed exclusively by css/base.css @media blocks. Raw px values preserve
     the live-site rendering that the Foundation baseline must capture. */
  --text-base-tablet: 15px;   /* used at max-width: 768px */
  --text-base-mobile: 14px;   /* used at max-width: 480px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */
  --text-6xl: 3.75rem;    /* 60px */

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

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Letter Spacing */
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;

  /* ==========================================================================
     TRANSITIONS
     ========================================================================== */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-bounce: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* ==========================================================================
     Z-INDEX SCALE
     ========================================================================== */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;

  /* ==========================================================================
     CONTAINER WIDTHS
     ========================================================================== */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-2xl: 1400px;

  /* ==========================================================================
     BREAKPOINTS (for reference in CSS)
     ========================================================================== */
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1400px;

  /* ==========================================================================
     LAVENDER TINTS — Blue-purple UI backgrounds (filter sections, sort bars)
     ========================================================================== */
  --lavender-50: #fafbff;
  --lavender-100: #f8f9ff;
  --lavender-150: #f0f0ff;
  --lavender-200: #e0e5ff;
  --purple-tint-soft: #faf5ff;

  /* ==========================================================================
     VIOLET PALETTE — Toggle switch, taxonomy-tag gradients (Tailwind-compatible)
     ========================================================================== */
  --violet-100: #e9d5ff;
  --violet-200: #ddd6fe;
  --violet-300: #c4b5fd;
  --violet-800: #5b21b6;

  /* ==========================================================================
     ROSE/PINK PALETTE — Product-type taxonomy tags
     ========================================================================== */
  --rose-100: #fed7e2;
  --rose-200: #fbb6ce;
  --rose-700: #be185d;

  /* ==========================================================================
     AMBER PALETTE — Active-filters indicator (distinct from orange --warning)
     ========================================================================== */
  --amber-100: #fff3cd;
  --amber-200: #ffeaa7;
  --amber-400: #ffc107;
  --amber-text: #856404;

  /* ==========================================================================
     STOCK STATUS GRADIENT STOPS — Availability badge gradients
     ========================================================================== */
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --gray-500: #6b7280;
  --gray-600: #4b5563;

  /* ==========================================================================
     UI GRAYS — Dividers, skeleton-loader shimmer
     ========================================================================== */
  --ui-gray-100: #f0f0f0;
  --ui-gray-200: #e0e0e0;

  /* ==========================================================================
     QUICK-VIEW AVAILABILITY — Bootstrap-compatible badge colors
     ========================================================================== */
  --qv-success-bg: #d4edda;
  --qv-success-text: #155724;
  --qv-error-bg: #f8d7da;
  --qv-error-text: #721c24;

  /* ==========================================================================
     SKY BLUE — Price section accent background
     ========================================================================== */
  --sky-50: #f0f9ff;
  --sky-100: #e0f2fe;

  /* Placeholder text (Tailwind-compatible cool gray) */
  --color-placeholder: #9ca3af;

  /* ==========================================================================
     LEGACY VARIABLE MAPPINGS
     For backwards compatibility with older CSS files
     ========================================================================== */

  /* Color Aliases */
  --primary-color: var(--purple-700);
  --secondary-color: var(--purple-600);
  --accent-color: var(--purple-500);
  --tertiary-color: var(--purple-400);

  /* Background Colors */
  --background-primary: #ffffff;
  --background-secondary: var(--cream-100);
  --background-tertiary: var(--cream-200);
  --background-hover: var(--cream-300);

  /* Border Aliases */
  --border-color: var(--border-light);

  /* Functional Color Aliases */
  --success-color: var(--success);
  --warning-color: var(--warning);
  --danger-color: var(--error);
  --info-color: var(--info);

  /* Font Family Aliases */
  --font-family-base: var(--font-body);
  --font-family-secondary: var(--font-display);
  --font-family-heading: var(--font-display);
  --font-family-mono: var(--font-mono);

  /* Font Size Aliases */
  --font-size-xs: var(--text-xs);
  --font-size-sm: var(--text-sm);
  --font-size-base: var(--text-base);
  --font-size-lg: var(--text-lg);
  --font-size-xl: var(--text-xl);
  --font-size-2xl: var(--text-2xl);
  --font-size-3xl: var(--text-3xl);
  --font-size-4xl: var(--text-4xl);
  --font-size-5xl: var(--text-5xl);

  /* Font Weight Aliases */
  --font-weight-light: var(--font-light);
  --font-weight-normal: var(--font-normal);
  --font-weight-medium: var(--font-medium);
  --font-weight-semibold: var(--font-semibold);
  --font-weight-bold: var(--font-bold);

  /* Border Radius Aliases */
  --border-radius-xs: var(--radius-xs);
  --border-radius-sm: var(--radius-sm);
  --border-radius-md: var(--radius-md);
  --border-radius-lg: var(--radius-lg);
  --border-radius-xl: var(--radius-xl);
  --border-radius-full: var(--radius-full);

  /* Container Aliases */
  --container-max-width: var(--container-xl);
  --container-padding: var(--space-5);
}

/* ==========================================================================
   HIGH CONTRAST MODE
   ========================================================================== */
@media (prefers-contrast: high) {
  :root {
    --purple-700: #4A1A5A;
    --text-primary: #000000;
    --text-secondary: #1A1A1A;
    --border-light: #000000;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
  }
}
} /* end @layer tokens */