/**
 * Safari Theme - Variables, Resets, and Brand Utilities
 *
 * Combines:
 *  - CSS custom properties (theme-variables)
 *  - Global layout resets (formerly styles.css)
 *  - Brand-color utility classes backed by CSS variables
 *
 * Load order: before Tailwind so variables are available; utility classes
 * are new selectors that don't conflict with Tailwind regardless of order.
 *
 * @package Safari_Theme
 */

:root {
  /* ========================================
     COLOR VARIABLES
     ======================================== */

  /* Primary Colors */
  --color-primary: #b91c1c;          /* red-700 */
  --color-primary-hover: #991b1b;    /* red-800 */

  /* Secondary Colors */
  --color-secondary: #374151;        /* gray-700 */

  /* Background & Text */
  --color-background: #ffffff;
  --color-text: #1f2937;             /* gray-800 */

  /* Price Color */
  --color-price: #059669;            /* green-600 */

  /* Feedback Colors */
  --color-success: #059669;          /* green-600 */
  --color-error: #dc2626;            /* red-600 */
  --color-warning: #f59e0b;          /* amber-500 */
  --color-info: #3b82f6;             /* blue-500 */


  /* ========================================
     TYPOGRAPHY VARIABLES
     ======================================== */

  /* Font Families */
  --font-site-title: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-product-title: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-product-price: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-button: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Font Weights */
  --font-weight-site-title: 700;
  --font-weight-body: 400;
  --font-weight-product-title: 600;
  --font-weight-product-price: 700;
  --font-weight-button: 500;


  /* ========================================
     BUTTON VARIABLES
     ======================================== */

  /* Button Dimensions */
  --button-radius: 0.5rem;           /* 8px */
  --button-padding-x: 1.5rem;        /* 24px */
  --button-padding-y: 0.75rem;       /* 12px */

  /* Button Colors */
  --button-bg-normal: #b91c1c;       /* red-700 */
  --button-bg-hover: #991b1b;        /* red-800 */
  --button-text-normal: #ffffff;
  --button-text-hover: #ffffff;

  /* Button Typography */
  --button-font-size: 1rem;          /* 16px */
  --button-font-weight: 500;


  /* ========================================
     HEADER VARIABLES
     ======================================== */

  --header-bg: #ffffff;
  --header-text: #1f2937;            /* gray-800 */
  --header-logo-height: 60px;
  --header-sticky: 1;                /* 1 = enabled, 0 = disabled */
  --header-transparent: 0;           /* 1 = enabled, 0 = disabled */


  /* ========================================
     FOOTER VARIABLES
     ======================================== */

  --footer-bg: #1f2937;              /* gray-800 */
  --footer-text: #ffffff;
  --footer-link: #9ca3af;            /* gray-400 */
  --footer-link-hover: #ffffff;


  /* ========================================
     LAYOUT VARIABLES
     ======================================== */

  --container-max-width: 1280px;     /* xl breakpoint */
  --sidebar-width: 320px;
  --content-spacing: 3rem;           /* 48px */


  /* ========================================
     SPACING & SIZING
     ======================================== */

  --spacing-xs: 0.25rem;             /* 4px */
  --spacing-sm: 0.5rem;              /* 8px */
  --spacing-md: 1rem;                /* 16px */
  --spacing-lg: 1.5rem;              /* 24px */
  --spacing-xl: 2rem;                /* 32px */
  --spacing-2xl: 3rem;               /* 48px */


  /* ========================================
     BORDER & SHADOW
     ======================================== */

  --border-radius-sm: 0.25rem;       /* 4px */
  --border-radius-md: 0.5rem;        /* 8px */
  --border-radius-lg: 0.75rem;       /* 12px */
  --border-radius-xl: 1rem;          /* 16px */

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);


  /* ========================================
     TRANSITIONS
     ======================================== */

  --transition-fast: 150ms;
  --transition-base: 200ms;
  --transition-slow: 300ms;
  --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   SMOOTH TRANSITIONS FOR CUSTOMIZER
   When theme mods change via customizer, these transitions
   create smooth color animations instead of instant jumps
   ======================================== */

* {
  transition: background-color var(--transition-base) var(--transition-ease),
              color var(--transition-base) var(--transition-ease),
              border-color var(--transition-base) var(--transition-ease),
              box-shadow var(--transition-base) var(--transition-ease);
}

/* Faster transitions for buttons and interactive elements */
button,
a,
input:not([type="checkbox"]):not([type="radio"]),
textarea {
  transition: background-color var(--transition-fast) var(--transition-ease),
              color var(--transition-fast) var(--transition-ease),
              border-color var(--transition-fast) var(--transition-ease);
}

/* Prevent transitions on animations that already have motion */
@keyframes *,
.fade-in-element,
.fade-in-visible,
.safari-shimmer,
.safari-spin {
  /* Keep existing animations intact */
}

/* ========================================
   SAFARI THEME PRESET OVERRIDES
   These can be uncommented or modified by the customizer
   ======================================== */

/* Safari Green Theme */
/*
:root {
  --color-primary: #059669;
  --color-primary-hover: #047857;
  --color-secondary: #0f766e;
  --color-price: #d97706;
}
*/

/* Safari Blue Theme */
/*
:root {
  --color-primary: #0284c7;
  --color-primary-hover: #0369a1;
  --color-secondary: #1e40af;
  --color-price: #0891b2;
}
*/

/* Safari Gold Theme */
/*
:root {
  --color-primary: #d97706;
  --color-primary-hover: #b45309;
  --color-secondary: #92400e;
  --color-price: #b45309;
}
*/


/* ========================================
   SHOP / COMPONENT SHADOW UTILITIES
   Moved here from safari-shop.css so they
   are available on all pages (not just shop).
   ======================================== */

:root {
  --safari-shadow:        0 10px 20px rgba(0, 0, 0, 0.06);
  --safari-shadow-strong: 0 12px 28px rgba(0, 0, 0, 0.12);
}


/* ========================================
   GLOBAL LAYOUT RESETS
   ======================================== */

/* Ensure no unintended gap above footer sitewide */
.site-main > *:last-child,
main#main > *:last-child,
.no-gap-to-footer {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.site-footer,
footer.site-footer {
  margin-top: 0 !important;
}

.no-gap-to-footer {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
  margin-bottom: 0 !important;
  display: flow-root;
}


/* ========================================
   BRAND-COLOR UTILITIES (CSS variable-backed)
   Templates use these classes instead of
   hardcoded Tailwind color classes (bg-red-700
   etc.) so the Customizer can update them live.
   IMPORTANT: add a matching entry here for any
   new brand-color element added to templates.
   ======================================== */

.bg-primary                        { background-color: var(--color-primary); }
.text-primary                      { color: var(--color-primary); }
.border-primary                    { border-color: var(--color-primary); }
.text-price                        { color: var(--color-price); }
.hover\:bg-primary:hover           { background-color: var(--color-primary); }
.hover\:bg-primary-hover:hover     { background-color: var(--color-primary-hover); }
.hover\:text-primary:hover         { color: var(--color-primary); }
.hover\:text-primary-hover:hover   { color: var(--color-primary-hover); }
.hover\:border-primary:hover       { border-color: var(--color-primary); }
.focus-visible\:ring-primary:focus-visible {
  --tw-ring-color: var(--color-primary);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), 0 0 0 2px var(--color-primary);
}