/*
 * CatWalk Theme - Semantic Design System
 * This file defines the core design tokens and semantic color logic.
 * It serves as the single source of truth for the theme engine.
 *
 * Architecture:
 * 1. Base Primitives (Hard values or User Input)
 * 2. Semantic Mapping (Role-based names)
 * 3. Component Tokens (Specific usage)
 *
 * Version: 2.0.0 (Semantic Upgrade)
 */

:root {
  /* ==========================================================================
     1. BASE PRIMITIVES (User Configurable)
     ========================================================================== */

  /* Primary Brand Color */
  --color-primary-base: #fc8dcf;
  --color-primary-rgb: 252, 141, 207;

  /* Secondary/Accent Color */
  --color-secondary-base: #171517;
  --color-secondary-rgb: 23, 21, 23;

  /* Background Base */
  --color-bg-base: #ffffff;
  --color-bg-rgb: 255, 255, 255;

  /* ==========================================================================
     2. GENERATED PALETTE (System Calculated)
     Based on primitives, we generate variations automatically.
     ========================================================================== */

  /* Primary Variations */
  /* Hover: 10% darker for interaction feedback */
  --color-primary-hover: color-mix(
    in srgb,
    var(--color-primary-base),
    black 10%
  );

  /* Active: 20% darker for active states */
  --color-primary-active: color-mix(
    in srgb,
    var(--color-primary-base),
    black 20%
  );

  /* Light/Soft: 90% lighter for backgrounds */
  --color-primary-soft: color-mix(
    in srgb,
    var(--color-primary-base),
    white 90%
  );

  /* Border: 60% lighter for subtle borders */
  --color-primary-border: color-mix(
    in srgb,
    var(--color-primary-base),
    white 60%
  );

  /* Secondary Variations */
  --color-secondary-hover: color-mix(
    in srgb,
    var(--color-secondary-base),
    white 20%
  );
  --color-secondary-soft: color-mix(
    in srgb,
    var(--color-secondary-base),
    white 95%
  );

  /* Gradients (Auto-generated from Primary) */
  --gradient-primary: linear-gradient(
    135deg,
    var(--color-primary-base) 0%,
    var(--color-primary-hover) 100%
  );
  --gradient-soft: linear-gradient(
    135deg,
    var(--color-primary-soft) 0%,
    var(--color-bg-base) 100%
  );

  /* ==========================================================================
     3. SEMANTIC TOKENS (Role Based)
     Use these in your CSS, never use primitives directly.
     ========================================================================== */

  /* CatWalk Legacy Aliases (Bridge for existing code) */
  --catwalk-primary: var(--color-primary-base);
  --catwalk-primary-hover: var(--color-primary-hover);
  --catwalk-primary-rgb: var(--color-primary-rgb);

  --catwalk-secondary: var(--color-secondary-base);
  --catwalk-dark: var(
    --color-secondary-base
  ); /* Added for backward compatibility */
  --catwalk-muted: var(
    --catwalk-text-muted
  ); /* Added for backward compatibility */

  /* Backgrounds */
  --catwalk-bg-main: var(--color-bg-base);
  --catwalk-bg-main-rgb: var(--color-bg-rgb);
  --catwalk-bg-light: #f8f9fa; /* Neutral light gray */
  --catwalk-bg-dark: var(--color-secondary-base);
  --catwalk-bg-primary-light: var(--color-primary-soft);

  /* Text */
  --catwalk-text-primary: var(--color-secondary-base);
  --catwalk-text-secondary: #666666;
  --catwalk-text-muted: #999999;
  --catwalk-text-white: #ffffff;

  /* Borders */
  --catwalk-border: #e8e8e8;
  --catwalk-border-dark: #cccccc;
  --catwalk-border-light: #f0f0f0;
  --catwalk-border-primary: var(--color-primary-border);

  /* Status Colors (Standard UX) */
  --catwalk-success-bg: #d4edda;
  --catwalk-success-text: #155724;
  --catwalk-success-border: #c3e6cb;

  --catwalk-error-bg: #f8d7da;
  --catwalk-error-text: #721c24;
  --catwalk-error-border: #f5c6cb;

  --catwalk-warning-bg: #fff3cd;
  --catwalk-warning-text: #856404;

  --catwalk-info-bg: #cce5ff;
  --catwalk-info-text: #004085;

  /* Fonts */
  --catwalk-font-main:
    "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --catwalk-font-serif: "Didot", "Bodoni MT", serif;

  /* Shadows */
  --catwalk-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --catwalk-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --catwalk-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);

  /* Transitions */
  --catwalk-transition: all 0.3s ease;
  --catwalk-transition-fast: all 0.15s ease;

  /* ==========================================================================
     4. EXTENDED TOKENS & MODULE ALIASES
     Derived from semantic tokens above. Provides module-specific naming.
     ========================================================================== */

  /* --- 4a. Missing RGB Values --- */
  --catwalk-black-rgb: 0, 0, 0;
  --catwalk-text-primary-rgb: var(
    --color-secondary-rgb
  ); /* For rgba() in search overlay etc. */
  --catwalk-primary-hover-rgb: 250, 115, 196;
  --catwalk-success-rgb: 212, 237, 218; /* #d4edda decomposed */

  /* --- 4b. Backgrounds --- */
  --catwalk-bg-footer: var(--color-secondary-base);
  --catwalk-bg-product: #efefef;
  --catwalk-bg-primary-gradient-start: var(--color-primary-soft);
  --catwalk-bg-primary-gradient-end: var(--color-bg-base);

  /* --- 4c. Borders --- */
  --catwalk-border-primary: var(--color-primary-border);
  --catwalk-info-border: #b8daff; /* Bootstrap info-border equivalent */

  /* --- 4d. Font Aliases --- */
  --catwalk-font: var(--catwalk-font-main);
  --font-main: var(
    --catwalk-font-main
  ); /* Legacy shorthand used in components */

  /* --- 4e. Cart Module --- */
  --catwalk-cart-border: var(--catwalk-border);
  --catwalk-cart-bg-light: var(--catwalk-bg-primary-light);
  --catwalk-cart-text-secondary: var(--catwalk-text-secondary);
  --catwalk-cart-primary: var(--catwalk-primary);
  --catwalk-cart-primary-hover: var(--catwalk-primary-hover);
  --catwalk-cart-text: var(--catwalk-text-primary);
  --catwalk-cart-step-inactive: var(--catwalk-border-dark);

  /* --- 4f. Checkout / Cart Steps --- */
  --catwalk-step-active: var(--catwalk-primary);
  --catwalk-step-inactive: var(--catwalk-border-dark);
  --catwalk-step-text: var(--catwalk-text-primary);

  /* --- 4g. Status Badge Colors --- */
  --catwalk-status-purple-bg: #ede9fe;
  --catwalk-status-purple-text: #6b21a8;
  --catwalk-status-purple-border: #c4b5fd;
  --catwalk-status-blue-border: #90caf9;

  /* --- 4h. Compare Module ---
     Derived from primary + blue shift for visual distinction.
     Primary pink → purple-ish, primary orange → blue-ish, etc.
  */
  --catwalk-compare: color-mix(in srgb, var(--color-primary-base), blue 40%);
  --catwalk-compare-hover: color-mix(
    in srgb,
    var(--catwalk-compare),
    black 12%
  );
  --catwalk-compare-light: color-mix(
    in srgb,
    var(--catwalk-compare),
    white 40%
  );
}