/**
 * LMIn CSS Variables - GreenshitWP Design System Integration
 * 
 * This file provides CSS custom properties for consistent theming.
 * Uses GreenshitWP's fluid design system with fallbacks for compatibility.
 * 
 * @package LMIn
 */

/* ============================================
   GREENSHITWP SPACE VARIABLES (Fluid Spacing)
   All values use clamp() for responsive sizing
   ============================================ */

:root {
    /* Space Variables - Fluid spacing system */
    --space-3xs: clamp(0.25rem, calc(0.21rem + 0.21vw), 0.38rem);  /* 4-6px */
    --space-2xs: clamp(0.38rem, calc(0.31rem + 0.31vw), 0.56rem);  /* 6-9px */
    --space-xs: clamp(0.50rem, calc(0.42rem + 0.42vw), 0.75rem);    /* 8-12px */
    --space-s: clamp(0.75rem, calc(0.63rem + 0.63vw), 1.13rem);     /* 12-18px */
    --space-m: clamp(1.13rem, calc(0.94rem + 0.94vw), 1.69rem);     /* 18-27px */
    --space-l: clamp(1.69rem, calc(1.41rem + 1.40vw), 2.53rem);      /* 27-40px */
    --space-xl: clamp(2.53rem, calc(2.11rem + 2.10vw), 3.80rem);     /* 40-61px */
    --space-2xl: clamp(3.80rem, calc(3.17rem + 3.15vw), 5.70rem);   /* 61-91px */

    /* Size Variables - Fluid typography system */
    --size-2xs: clamp(0.80rem, calc(0.71rem + 0.46vw), 1.00rem);    /* 13-16px */
    --size-xs: clamp(0.96rem, calc(0.85rem + 0.54vw), 1.20rem);      /* 15-19px */
    --size-s: clamp(1.13rem, calc(0.98rem + 0.71vw), 1.25rem);      /* 18-20px */
    --size-m: clamp(1.35rem, calc(1.16rem + 0.95vw), 1.50rem);      /* 22-24px */
    --size-l: clamp(1.62rem, calc(1.37rem + 1.24vw), 1.88rem);      /* 26-30px */
    --size-xl: clamp(1.94rem, calc(1.61rem + 1.66vw), 2.34rem);      /* 31-37px */
    --size-2xl: clamp(2.33rem, calc(1.90rem + 2.16vw), 2.93rem);     /* 37-47px */
    --size-3xl: clamp(3.00rem, calc(2.60rem + 3.30vw), 4.80rem);     /* 48-77px */
    --size-4xl: clamp(4.20rem, calc(3.36rem + 4.20vw), 6.00rem);     /* 67-96px */
    --size-5xl: clamp(5.00rem, calc(4.00rem + 5.00vw), 7.50rem);     /* 80-120px */

    /* ============================================
       COLOR VARIABLES - Fallback Values
       These are used when GreenshitWP theme is not active
       ============================================ */
    
    /* Contrast Colors */
    --contrast: var(--gs-colorcolor1, #1d2327);           /* Primary text */
    --contrast-2: #575760;                                  /* Secondary text */
    --contrast-3: #b2b2be;                                  /* Tertiary/muted */

    /* Base Colors */
    --base: #f0f0f0;                                        /* Light gray */
    --base-2: #f7f8f9;                                      /* Lighter gray */
    --base-3: #ffffff;                                      /* White */

    /* Accent Color */
    --accent: var(--wp--preset--color--brand, #2271b1);    /* WordPress brand blue */

    /* ============================================
       LMIn SPECIFIC VARIABLES
       ============================================ */
    
    /* Container */
    --lmin-container-max: 1400px;
    --lmin-container-header-max: 1480px;

    /* Border Radius */
    --lmin-radius-sm: 4px;
    --lmin-radius-md: 6px;
    --lmin-radius-lg: 8px;
    --lmin-radius-xl: 12px;
    --lmin-radius-pill: 20px;

    /* Shadows */
    --lmin-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --lmin-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --lmin-shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.2);

    /* Transitions */
    --lmin-transition-fast: 0.15s ease;
    --lmin-transition-normal: 0.2s ease;
    --lmin-transition-slow: 0.3s ease;
}

/* ============================================
   QUIET MODERNISM TOKENS (Dashboard v2)
   light-dark() requires color-scheme on :root
   ============================================ */
:root {
    color-scheme: light dark;

    /* Background hierarchy */
    --color-bg:             light-dark(#FAFAF9, #0A0A0B);
    --color-surface:        light-dark(#FFFFFF, #141415);
    --color-surface-raised: light-dark(#F5F5F4, #1C1917);

    /* Borders */
    --color-border:       light-dark(#E5E5E4, #333333);
    --color-border-hover: light-dark(#D6D3D1, #3F3F46);

    /* Text */
    --color-text:       light-dark(#1C1917, #FAFAF9);
    --color-text-muted: light-dark(#78716C, #A8A29E);

    /* Accent (indigo) */
    --color-accent:        light-dark(#5046E5, #818CF8);
    --color-accent-fg:     light-dark(#FFFFFF, #0A0A0B);
    --color-accent-subtle: light-dark(#EEF2FF, #1E1B4B);

    /* Semantic */
    --color-success: light-dark(#16A34A, #4ADE80);
    --color-warning: light-dark(#D97706, #FBBF24);
    --color-danger:  light-dark(#DC2626, #F87171);

    /* Fluid type scale (Utopia Minor Third -> Major Third) */
    --step--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
    --step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
    --step-0:  clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
    --step-1:  clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
    --step-2:  clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
    --step-3:  clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
    --step-4:  clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);

    /* Radii */
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-full: 9999px;

    /* Container */
    --container-max: min(1200px, 100% - clamp(1rem, 4vw, 3rem));
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }
:root[data-theme="auto"]  { color-scheme: light dark; }