/**
 * Schilcher Customer Catalog - Centralized Design System
 *
 * This file defines all CSS custom properties (variables) used throughout
 * the Schilcher Customer Catalog plugin. Provides consistent styling and
 * easy maintenance through a single source of truth.
 *
 * @package Schilcher_Customer_Catalog
 * @since 1.2.6
 */

:root {
  /* ============================================
     BASE SIZING - Controls Global Scale
     ============================================ */
  font-size: 70%; /* 11.2px base (70% of browser default 16px) */

  /* ============================================
     BRAND COLORS
     ============================================ */
  --schilcher-primary-teal: #fef8e7;
  --schilcher-primary-text-brown: #49391b;
  --schilcher-warm-brown: #876c4b;
  --schilcher-light-brown: #bda77f;
  --schilcher-cream: #f5f0e6;
  --schilcher-accent-yellow: #fdfdfc;

  /* Semantic color names */
  --schilcher-bg-primary: #ffffff;
  --schilcher-bg-secondary: var(--schilcher-primary-teal);
  --schilcher-bg-tertiary: var(--schilcher-cream);

  --schilcher-text-primary: var(--schilcher-primary-text-brown);
  --schilcher-text-secondary: var(--schilcher-warm-brown);
  --schilcher-text-muted: var(--schilcher-light-brown);

  --schilcher-border-color: var(--schilcher-cream);
  --schilcher-border-color-strong: var(--schilcher-warm-brown);

  /* Status colors */
  --schilcher-success: #28a745;
  --schilcher-warning: #ffc107;
  --schilcher-error: #dc3545;
  --schilcher-info: #1976d2;

  /* ============================================
     TYPOGRAPHY
     ============================================ */
  --schilcher-font-family: 'Open Sans', Arial, sans-serif;

  /* ============================================
     STRICT TYPE SCALE - ONLY 5 SIZES!
     Use these consistently everywhere
     ============================================ */

  /* DISPLAY - Page titles only (e.g., "Shop", "Warenkorb") */
  --schilcher-text-display: 2rem;         /* ~22.4px at 70% */

  /* HEADING - Section headers (e.g., "Zusammenfassung", "Produktdetails") */
  --schilcher-text-heading: 1.5rem;       /* ~16.8px at 70% */

  /* BODY - ALL normal text (labels, buttons, product names, prices) */
  --schilcher-text-body: 1.125rem;        /* ~12.6px at 70% - DEFAULT FOR EVERYTHING */

  /* SMALL - Secondary info (SKU, metadata, hints) */
  --schilcher-text-small: 0.875rem;       /* ~9.8px at 70% */

  /* TINY - Minimal text (legal, tooltips) */
  --schilcher-text-tiny: 0.75rem;         /* ~8.4px at 70% */

  /* ============================================
     DEPRECATED - For backward compatibility only
     Remove these gradually and use new scale
     ============================================ */
  --schilcher-font-size-xs: var(--schilcher-text-tiny);
  --schilcher-font-size-sm: var(--schilcher-text-small);
  --schilcher-font-size-base: var(--schilcher-text-body);
  --schilcher-font-size-md: var(--schilcher-text-body);
  --schilcher-font-size-lg: var(--schilcher-text-heading);
  --schilcher-font-size-xl: var(--schilcher-text-heading);
  --schilcher-font-size-h1: var(--schilcher-text-display);
  --schilcher-font-size-h2: var(--schilcher-text-display);
  --schilcher-font-size-h3: var(--schilcher-text-heading);
  --schilcher-font-size-h4: var(--schilcher-text-heading);
  --schilcher-font-size-h5: var(--schilcher-text-body);
  --schilcher-font-size-h6: var(--schilcher-text-body);

  /* Font weights */
  --schilcher-font-weight-normal: 400;
  --schilcher-font-weight-medium: 500;
  --schilcher-font-weight-semibold: 600;
  --schilcher-font-weight-bold: 700;

  /* Line heights */
  --schilcher-line-height-tight: 1.3;
  --schilcher-line-height-normal: 1.5;
  --schilcher-line-height-relaxed: 1.6;

  /* ============================================
     SPACING SCALE (0.25rem increments)
     ============================================ */
  --schilcher-space-0: 0;
  --schilcher-space-xs: 0.5rem;       /* ~5.6px (was 8px) */
  --schilcher-space-sm: 0.75rem;      /* ~8.4px (was 12px) */
  --schilcher-space-md: 1rem;         /* ~11.2px (was 16px) */
  --schilcher-space-lg: 1.25rem;      /* ~14px (was 20px) */
  --schilcher-space-xl: 1.5rem;       /* ~16.8px (was 24px) */
  --schilcher-space-2xl: 2rem;        /* ~22.4px (was 32px) */
  --schilcher-space-3xl: 2.5rem;      /* ~28px (was 40px) */
  --schilcher-space-4xl: 3rem;        /* ~33.6px (was 48px) */
  --schilcher-space-5xl: 4rem;        /* ~44.8px (was 64px) */

  /* ============================================
     COMPONENT DIMENSIONS
     ============================================ */

  /* Button heights */
  --schilcher-button-height-sm: 2rem;     /* ~22.4px (was 32px) */
  --schilcher-button-height-md: 2.5rem;   /* ~28px (was 40px) */
  --schilcher-button-height-lg: 2.75rem;  /* ~30.8px (was 44px) */

  /* Input heights */
  --schilcher-input-height-sm: 2rem;      /* ~22.4px (was 32px) */
  --schilcher-input-height-md: 2.25rem;   /* ~25.2px (was 36px) */
  --schilcher-input-height-lg: 2.5rem;    /* ~28px (was 40px) */

  /* Border radius */
  --schilcher-radius-none: 0;
  --schilcher-radius-xs: 0.25rem;         /* ~2.8px (was 4px) */
  --schilcher-radius-sm: 0.375rem;        /* ~4.2px (was 6px) */
  --schilcher-radius-md: 0.5rem;          /* ~5.6px (was 8px) */
  --schilcher-radius-lg: 0.75rem;         /* ~8.4px (was 12px) */
  --schilcher-radius-xl: 1rem;            /* ~11.2px (was 16px) */
  --schilcher-radius-full: 9999px;        /* Pill shape */

  /* Icon sizes */
  --schilcher-icon-xs: 0.75rem;           /* ~8.4px (was 12px) */
  --schilcher-icon-sm: 1rem;              /* ~11.2px (was 16px) */
  --schilcher-icon-md: 1.25rem;           /* ~14px (was 20px) */
  --schilcher-icon-lg: 1.5rem;            /* ~16.8px (was 24px) */
  --schilcher-icon-xl: 2rem;              /* ~22.4px (was 32px) */

  /* ============================================
     LAYOUT & CONTAINERS
     ============================================ */
  --schilcher-container-width-sm: 640px;
  --schilcher-container-width-md: 768px;
  --schilcher-container-width-lg: 1024px;
  --schilcher-container-width-xl: 1280px;
  --schilcher-container-width-2xl: 1600px;

  /* ============================================
     SHADOWS
     ============================================ */
  --schilcher-shadow-xs: 0 1px 2px rgba(73, 57, 27, 0.05);
  --schilcher-shadow-sm: 0 0.125rem 0.5rem rgba(73, 57, 27, 0.08);
  --schilcher-shadow-md: 0 0.25rem 0.75rem rgba(73, 57, 27, 0.12);
  --schilcher-shadow-lg: 0 0.5rem 1.5rem rgba(73, 57, 27, 0.15);
  --schilcher-shadow-xl: 0 0.75rem 2rem rgba(73, 57, 27, 0.2);
  --schilcher-shadow-2xl: 0 1rem 3rem rgba(73, 57, 27, 0.25);

  /* ============================================
     TRANSITIONS
     ============================================ */
  --schilcher-transition-fast: 0.15s ease;
  --schilcher-transition-base: 0.2s ease;
  --schilcher-transition-slow: 0.3s ease;

  /* ============================================
     Z-INDEX LAYERS
     ============================================ */
  --schilcher-z-base: 1;
  --schilcher-z-dropdown: 1000;
  --schilcher-z-sticky: 1020;
  --schilcher-z-fixed: 1030;
  --schilcher-z-modal-backdrop: 1040;
  --schilcher-z-modal: 1050;
  --schilcher-z-popover: 1060;
  --schilcher-z-tooltip: 1070;
  --schilcher-z-notification: 1080;
  --schilcher-z-cart-widget: 99999;

  /* ============================================
     BREAKPOINTS (for reference in media queries)
     ============================================ */
  --schilcher-breakpoint-xs: 480px;
  --schilcher-breakpoint-sm: 549px;
  --schilcher-breakpoint-md: 768px;
  --schilcher-breakpoint-lg: 992px;
  --schilcher-breakpoint-xl: 1200px;
}

/* ============================================
   GLOBAL RESETS & DEFAULTS
   ============================================ */

/* Apply consistent font family to all plugin elements */
.schilcher-shop-page,
.schilcher-cart-page,
.schilcher-checkout-page,
.schilcher-orders-page,
.schilcher-cart-widget,
.schilcher-price-tag-widget {
  font-family: var(--schilcher-font-family);
  color: var(--schilcher-text-primary);
}

/* Ensure smooth font rendering */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}