/**
 * Kwata Social — Design Token Variables
 *
 * Dedicated CSS custom properties for the Kwata feed UI.
 * These are scoped to .kwata-app so they don't leak into the
 * rest of the WordPress site, and they are NOT inherited from
 * the Elementor/WordPress theme — giving Kwata full control.
 *
 * Light theme is the default. Dark theme overrides are at the bottom.
 *
 * @package Kwata
 */

/* ═══════════════════════════════════════════════════════════
   Light Theme (default)
   ═══════════════════════════════════════════════════════════ */

.kwata-app {
    /* ── Backgrounds ─────────────────────────────────────── */
    --kw-bg:             #ffffff;
    --kw-bg-secondary:   #f7f9f9;
    --kw-bg-tertiary:    #eff3f4;
    --kw-bg-elevated:    #ffffff;

    /* ── Text ────────────────────────────────────────────── */
    --kw-text:           #0f1419;
    --kw-text-secondary: #536471;
    --kw-text-muted:     #8b98a5;

    /* ── Borders ─────────────────────────────────────────── */
    --kw-border:         #eff3f4;
    --kw-border-light:   #eff3f4;

    /* ── Brand / Accent ──────────────────────────────────── */
    --kw-accent:         #F7941D;
    --kw-accent-dark:    #d47d15;
    --kw-accent-light:   rgba(247, 148, 29, 0.1);

    /* ── Semantic ────────────────────────────────────────── */
    --kw-success:        #00ba7c;
    --kw-success-light:  rgba(0, 186, 124, 0.1);
    --kw-danger:         #f4212e;
    --kw-danger-light:   rgba(244, 33, 46, 0.1);
    --kw-warning:        #F7941D;
    --kw-warning-light:  rgba(247, 148, 29, 0.1);
    --kw-warning-bg:     #fef3c7;
    --kw-warning-text:   #92400e;

    /* ── Typography ──────────────────────────────────────── */
    --kw-font:           "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --kw-font-heading:   "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --kw-font-weight:    400;
    --kw-font-weight-medium: 500;
    --kw-font-weight-bold:   600;

    --kw-text-xs:        11px;
    --kw-text-sm:        13px;
    --kw-text-base:      14px;
    --kw-text-md:        15px;
    --kw-text-lg:        18px;
    --kw-text-xl:        22px;

    /* ── Spacing ─────────────────────────────────────────── */
    --kw-space-xs:       4px;
    --kw-space-sm:       8px;
    --kw-space-md:       12px;
    --kw-space-lg:       16px;
    --kw-space-xl:       24px;

    /* ── Radius ──────────────────────────────────────────── */
    --kw-radius-sm:      4px;
    --kw-radius-md:      8px;
    --kw-radius-lg:      12px;
    --kw-radius-full:    9999px;

    /* ── Shadows ─────────────────────────────────────────── */
    --kw-shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.05);
    --kw-shadow-md:      0 4px 6px rgba(0, 0, 0, 0.07);
    --kw-shadow-lg:      0 10px 15px rgba(0, 0, 0, 0.1);

    /* ── Transitions ─────────────────────────────────────── */
    --kw-transition:     0.15s ease;

    /* ── Buttons (only for actual CTA/submit buttons) ────── */
    --kw-btn-radius:     8px;
    --kw-btn-padding:    8px 16px;
    --kw-btn-font-size:  14px;
    --kw-btn-font-weight: 500;
}


/* ═══════════════════════════════════════════════════════════
   Dark Theme (opt-in via class)
   ═══════════════════════════════════════════════════════════ */

.kwata-app:not(.kwata-theme-light) {
    --kw-bg:             #000000;
    --kw-bg-secondary:   #16181c;
    --kw-bg-tertiary:    #202327;
    --kw-bg-elevated:    #1a1a1a;

    --kw-text:           #e7e9ea;
    --kw-text-secondary: #a1a3a6;
    --kw-text-muted:     #8b8f94;

    --kw-border:         #333639;
    --kw-border-light:   #333639;

    --kw-accent:         #F7941D;
    --kw-accent-dark:    #d47d15;
    --kw-accent-light:   rgba(247, 148, 29, 0.15);

    --kw-success:        #00ba7c;
    --kw-success-light:  rgba(0, 186, 124, 0.15);
    --kw-danger:         #f4212e;
    --kw-danger-light:   rgba(244, 33, 46, 0.15);
    --kw-warning:        #F7941D;
    --kw-warning-light:  rgba(247, 148, 29, 0.15);
    --kw-warning-bg:     rgba(247, 148, 29, 0.15);
    --kw-warning-text:   #fbbf24;

    --kw-shadow-sm:      none;
    --kw-shadow-md:      none;
    --kw-shadow-lg:      0 0 15px rgba(255, 255, 255, 0.03);
}