/* ============================================================
   EC DESIGN TOKENS — SINGLE SOURCE OF TRUTH
   v2.0 | Unified across all EC stylesheets
   
   PALETA: Czarny / Biały + akcent #cf2e2e
   ============================================================ */

:root {

    /* ----------------------------------------------------------
       BRAND COLORS
    ---------------------------------------------------------- */
    --ec-red:           #cf2e2e;   /* akcent główny */
    --ec-red-dark:      #a82424;   /* hover / deeper */
    --ec-red-soft:      #fff1f2;   /* tła badge, pill */
    --ec-red-border:    rgba(207, 46, 46, 0.18);
    --ec-red-border-md: rgba(207, 46, 46, 0.28);

    /* ----------------------------------------------------------
       NEUTRALS (Black → White scale)
    ---------------------------------------------------------- */
    --ec-black:         #0f172a;   /* text główny, dark panels */
    --ec-black-mid:     #111827;   /* headings, dark bg */
    --ec-dark:          #1e293b;   /* hover na dark bg */
    --ec-slate:         #334155;   /* text średni */
    --ec-muted:         #475569;   /* subtext, descriptions */
    --ec-soft:          #64748b;   /* placeholders, help text */
    --ec-faint:         #94a3b8;   /* bardzo jasny tekst */

    --ec-border:        #e5e7eb;   /* krawędzie kart */
    --ec-border-light:  #e2e8f0;   /* krawędzie paneli */
    --ec-border-strong: #cbd5e1;   /* silniejsza krawędź */

    --ec-bg:            #ffffff;   /* tło strony */
    --ec-bg-off:        #f9fafb;   /* page background */
    --ec-bg-subtle:     #f8fafc;   /* panel alt, inputs bg */
    --ec-bg-panel:      #f1f5f9;   /* icon bg, chip bg */

    /* ----------------------------------------------------------
       SEMANTIC COLORS
    ---------------------------------------------------------- */
    --ec-success:       #15803d;
    --ec-success-bg:    #f0fdf4;
    --ec-success-light: #bbf7d0;
    --ec-success-muted: #4ade80;   /* na dark bg */

    --ec-warning:       #b45309;
    --ec-warning-bg:    #fffbeb;
    --ec-warning-light: #fde68a;
    --ec-warning-muted: #f59e0b;   /* na dark bg */

    --ec-danger:        #b91c1c;
    --ec-danger-bg:     #fef2f2;
    --ec-danger-light:  #fca5a5;
    --ec-danger-muted:  #ef4444;   /* na dark bg */

    --ec-info:          #0ea5e9;
    --ec-info-bg:       #eff6ff;
    --ec-info-color:    #2563eb;

    /* ----------------------------------------------------------
       TYPOGRAPHY SCALE
    ---------------------------------------------------------- */
    --ec-font-xs:       11px;
    --ec-font-sm:       12px;
    --ec-font-md:       13px;
    --ec-font-lg:       14px;
    --ec-font-xl:       15px;
    --ec-font-2xl:      17px;

    /* Alias dla kalkulatorów (zachowanie kompatybilności) */
    --ec-font-size-button:  14px;
    --ec-font-size-input:   14px;
    --ec-font-size-content: 13px;

    /* ----------------------------------------------------------
       SPACING
    ---------------------------------------------------------- */
    --ec-space-xs:  4px;
    --ec-space-sm:  8px;
    --ec-space-md:  12px;
    --ec-space-lg:  16px;
    --ec-space-xl:  24px;
    --ec-space-2xl: 32px;
    --ec-space-3xl: 48px;

    /* ----------------------------------------------------------
       RADIUS SCALE
    ---------------------------------------------------------- */
    --ec-radius-sm:  6px;
    --ec-radius-md:  8px;
    --ec-radius-lg:  12px;
    --ec-radius-xl:  14px;
    --ec-radius-2xl: 18px;
    --ec-radius-3xl: 20px;
    --ec-radius-pill: 999px;

    /* ----------------------------------------------------------
       SHADOWS
    ---------------------------------------------------------- */
    --ec-shadow-sm:
        0 4px 12px rgba(15, 23, 42, 0.05),
        0 10px 24px rgba(15, 23, 42, 0.04);

    --ec-shadow-md:
        0 8px 22px rgba(15, 23, 42, 0.06),
        0 20px 48px rgba(15, 23, 42, 0.05);

    --ec-shadow-lg:
        0 10px 30px rgba(15, 23, 42, 0.08),
        0 30px 80px rgba(15, 23, 42, 0.08);

    --ec-shadow-xl:
        0 18px 42px rgba(15, 23, 42, 0.12),
        0 40px 100px rgba(15, 23, 42, 0.10);

    --ec-shadow-float:
        0 10px 30px rgba(0, 0, 0, 0.18);

    /* ----------------------------------------------------------
       Z-INDEX STACK
    ---------------------------------------------------------- */
    --ec-z-dropdown:         500;
    --ec-z-sticky:           1000;
    --ec-z-report:           9997;
    --ec-z-workflow-launcher:9998;
    --ec-z-workflow-banner:  9999;
    --ec-z-modal:            10000;
    --ec-z-auth-modal:       999999;

    /* ----------------------------------------------------------
       LAYOUT
    ---------------------------------------------------------- */
    --ec-max-width:     1180px;
    --ec-content-width: 900px;

    /* Sticky header offsets (Blocksy) */
    --ec-header-offset-desktop: 100px;
    --ec-header-offset-tablet:  80px;
    --ec-header-offset-mobile:  80px;
    --ec-admin-bar:     var(--wp-admin--admin-bar--height, 0px);

    /* ----------------------------------------------------------
       DEPRECATED ALIASES (kompatybilność wsteczna, do usunięcia
       w v3.0 po pełnym refaktorze szablonów)
    ---------------------------------------------------------- */
    --ec-primary:      var(--ec-black);
    --ec-primary-soft: var(--ec-info-bg);
    --ec-text:         var(--ec-black-mid);
    --ec-text-soft:    var(--ec-soft);
    --ec-panel:        var(--ec-bg);
    --ec-panel-alt:    var(--ec-bg-subtle);
    --ec-bg-light:     var(--ec-bg-off);
    --ec-text-main:    var(--ec-black);
    --ec-text-muted:   var(--ec-soft);
    --ec-black-btn:    var(--ec-black-mid);
}