/**
 * SG Advanced Content Features — CSS Variables
 * 
 * Central design tokens for all plugin CSS files.
 * Override these variables in your theme to match your brand.
 * 
 * Usage: Add this file BEFORE any other plugin CSS, then override
 * in your theme's stylesheet or WordPress Customizer.
 *
 * @package    SG_Advanced_Content_Features
 * @since      2.7.0
 * @license    GPL-2.0-or-later
 */

:root {
  /* ==========================================================================
     COLOR SYSTEM — Primary Brand Colors
     ========================================================================== */

  /* --sg-acf-primary: #2271b1;
  --sg-acf-primary-hover: #135e96;
  --sg-acf-primary-light: rgba(34, 113, 177, 0.06);
  --sg-acf-primary-10: rgba(34, 113, 177, 0.1);
  --sg-acf-primary-25: rgba(34, 113, 177, 0.25);
  --sg-acf-primary-50: rgba(34, 113, 177, 0.5);
  --sg-acf-primary-70: rgba(34, 113, 177, 0.7); */

  /* Brand Primary */
  --sg-acf-primary: #077a6d;
  --sg-acf-primary-hover: #056358;
  --sg-acf-primary-light: rgba(7, 122, 109, 0.06);
  --sg-acf-primary-10: rgba(7, 122, 109, 0.1);
  --sg-acf-primary-25: rgba(7, 122, 109, 0.25);
  --sg-acf-primary-50: rgba(7, 122, 109, 0.5);
  --sg-acf-primary-70: rgba(7, 122, 109, 0.7);

  /* ==========================================================================
     COLOR SYSTEM — Neutrals
     ========================================================================== */

  --sg-acf-white: #ffffff;
  --sg-acf-gray-50: #f8f9fa;
  --sg-acf-gray-100: #f6f7f7;
  --sg-acf-gray-150: #f0f0f1;
  --sg-acf-gray-200: #e8eaed;
  --sg-acf-gray-250: #dcdcde;
  --sg-acf-gray-300: #c3c4c7;
  --sg-acf-gray-400: #a7aaad;
  --sg-acf-gray-500: #8c8f94;
  --sg-acf-gray-600: #646970;
  --sg-acf-gray-700: #50575e;
  --sg-acf-gray-800: #3c434a;
  --sg-acf-gray-900: #1d2327;
  --sg-acf-black: #000000;

  /* ==========================================================================
     COLOR SYSTEM — Semantic Colors
     ========================================================================== */

  --sg-acf-success: #00a32a;
  --sg-acf-success-hover: #008a20;
  --sg-acf-success-light: #edfaef;
  --sg-acf-warning: #dba617;
  --sg-acf-warning-light: #fef8ee;
  --sg-acf-error: #b32d2e;
  --sg-acf-error-light: #fcf0f1;
  --sg-acf-info: #2271b1;
  --sg-acf-info-light: #f0f6fc;

  /* ==========================================================================
     COLOR SYSTEM — Overlay
     ========================================================================== */

  --sg-acf-overlay: rgba(0, 0, 0, 0.6);
  --sg-acf-overlay-light: rgba(0, 0, 0, 0.04);
  --sg-acf-overlay-medium: rgba(0, 0, 0, 0.15);
  --sg-acf-overlay-dark: rgba(0, 0, 0, 0.5);

  /* ==========================================================================
     TYPOGRAPHY — Font Family
     ========================================================================== */

  --sg-acf-font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, "Helvetica Neue", sans-serif;
  --sg-acf-font-mono:
    SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;

  /* ==========================================================================
     TYPOGRAPHY — Font Sizes (rem based — 1rem = 16px)
     ========================================================================== */

  --sg-acf-text-2xs: 0.625rem; /* 10px */
  --sg-acf-text-xs: 0.6875rem; /* 11px */
  --sg-acf-text-sm: 0.75rem; /* 12px */
  --sg-acf-text-base: 0.8125rem; /* 13px */
  --sg-acf-text-md: 0.875rem; /* 14px */
  --sg-acf-text-lg: 0.9375rem; /* 15px */
  --sg-acf-text-xl: 1rem; /* 16px */
  --sg-acf-text-2xl: 1.0625rem; /* 17px */
  --sg-acf-text-3xl: 1.1875rem; /* 19px */
  --sg-acf-text-4xl: 1.375rem; /* 22px */
  --sg-acf-text-5xl: 1.75rem; /* 28px */

  /* ==========================================================================
     TYPOGRAPHY — Font Weights
     ========================================================================== */

  --sg-acf-weight-light: 300;
  --sg-acf-weight-normal: 400;
  --sg-acf-weight-medium: 500;
  --sg-acf-weight-semibold: 600;
  --sg-acf-weight-bold: 700;

  /* ==========================================================================
   TYPOGRAPHY — Font Styles
   ========================================================================== */

  --sg-acf-font-style-italic: italic;

  /* ==========================================================================
     TYPOGRAPHY — Line Heights
     ========================================================================== */

  --sg-acf-leading-base: 1;
  --sg-acf-leading-tight: 1.25;
  --sg-acf-leading-normal: 1.4;
  --sg-acf-leading-relaxed: 1.5;
  --sg-acf-leading-loose: 1.6;

  /* ==========================================================================
     TYPOGRAPHY — Letter Spacing
     ========================================================================== */

  --sg-acf-tracking-tight: -0.01em;
  --sg-acf-tracking-normal: 0;
  --sg-acf-tracking-wide: 0.02em;
  --sg-acf-tracking-uppercase: 0.3px;

  /* ==========================================================================
     SPACING — Based on 4px grid (0.25rem = 4px)
     ========================================================================== */

  --sg-acf-space-0: 0;
  --sg-acf-space-px: 0.0625rem; /* 1px */
  --sg-acf-space-0-5: 0.125rem; /* 2px */
  --sg-acf-space-1: 0.25rem; /* 4px */
  --sg-acf-space-1-5: 0.375rem; /* 6px */
  --sg-acf-space-2: 0.5rem; /* 8px */
  --sg-acf-space-2-5: 0.625rem; /* 10px */
  --sg-acf-space-3: 0.75rem; /* 12px */
  --sg-acf-space-3-5: 0.875rem; /* 14px */
  --sg-acf-space-4: 1rem; /* 16px */
  --sg-acf-space-4-5: 1.125rem; /* 18px */
  --sg-acf-space-5: 1.25rem; /* 20px */
  --sg-acf-space-6: 1.5rem; /* 24px */
  --sg-acf-space-7: 1.75rem; /* 28px */
  --sg-acf-space-8: 2rem; /* 32px */
  --sg-acf-space-10: 2.5rem; /* 40px */
  --sg-acf-space-12: 3rem; /* 48px */

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

  --sg-acf-radius-none: 0;
  --sg-acf-radius-sm: 0.25rem; /* 4px */
  --sg-acf-radius-md: 0.5rem; /* 8px */
  --sg-acf-radius-lg: 0.75rem; /* 12px */
  --sg-acf-radius-xl: 1rem; /* 16px */
  --sg-acf-radius-2xl: 1.25rem; /* 20px */
  --sg-acf-radius-full: 50%;
  --sg-acf-radius-pill: 9999px;

  /* ==========================================================================
     BORDER WIDTH
     ========================================================================== */

  --sg-acf-border: 0.0625rem; /* 1px */
  --sg-acf-border-2: 0.125rem; /* 2px */
  --sg-acf-border-3: 0.1875rem; /* 3px */

  /* ==========================================================================
     SHADOWS
     ========================================================================== */

  --sg-acf-shadow-none: none;
  --sg-acf-shadow-xs: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.05);
  --sg-acf-shadow-sm: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.04);
  --sg-acf-shadow-md: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.06);
  --sg-acf-shadow-lg: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
  --sg-acf-shadow-xl: 0 0.75rem 2rem rgba(0, 0, 0, 0.1);
  --sg-acf-shadow-2xl: 0 1.5625rem 3.125rem rgba(0, 0, 0, 0.15);

  /* ==========================================================================
     Z-INDEX SCALE
     ========================================================================== */

  --sg-acf-z-base: 1;
  --sg-acf-z-dropdown: 100;
  --sg-acf-z-sticky: 200;
  --sg-acf-z-overlay: 500;
  --sg-acf-z-modal: 1000;
  --sg-acf-z-tooltip: 1100;
  --sg-acf-z-max: 999999;

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

  --sg-acf-transition-fast: 0.15s ease;
  --sg-acf-transition-base: 0.2s ease;
  --sg-acf-transition-slow: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --sg-acf-transition-slower: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

  /* ==========================================================================
     OPACITY
     ========================================================================== */

  --sg-acf-opacity-0: 0;
  --sg-acf-opacity-25: 0.25;
  --sg-acf-opacity-50: 0.5;
  --sg-acf-opacity-75: 0.75;
  --sg-acf-opacity-80: 0.8;
  --sg-acf-opacity-90: 0.9;
  --sg-acf-opacity-95: 0.95;
  --sg-acf-opacity-100: 1;

  /* ==========================================================================
     SIZING
     ========================================================================== */

  --sg-acf-icon-sm: 0.75rem; /* 12px */
  --sg-acf-icon-md: 1rem; /* 16px */
  --sg-acf-icon-lg: 1.125rem; /* 18px */
  --sg-acf-icon-xl: 1.25rem; /* 20px */
  --sg-acf-icon-2xl: 1.5rem; /* 24px */

  /* ==========================================================================
   CSS Variables Advanced Filter Module
   ========================================================================== */

  --sg-acf-filter-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --sg-acf-filter-radius: var(--sg-acf-radius-md);
  --sg-acf-filter-border: var(--sg-acf-border) solid var(--sg-acf-gray-250);
  --sg-acf-filter-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.04);
  --sg-acf-filter-shadow-hover: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
  --sg-acf-filter-bg: var(--sg-acf-white);
  --sg-acf-filter-bg-hover: var(--sg-acf-gray-50);
  --sg-acf-filter-primary: var(--sg-acf-primary);
  --sg-acf-filter-primary-light: var(--sg-acf-primary-10);
  --sg-acf-filter-text: var(--sg-acf-gray-800);
  --sg-acf-filter-text-muted: var(--sg-acf-gray-500);

  /* ==========================================================================
     BREAKPOINTS (reference only — use in media queries as px)
     ========================================================================== */

  /* --sg-acf-breakpoint-sm: 480px;  */
  /* --sg-acf-breakpoint-md: 640px;  */
  /* --sg-acf-breakpoint-lg: 768px;  */
  /* --sg-acf-breakpoint-xl: 1024px; */
}