/**
 * RAITI — Unified Design System Tokens
 * ─────────────────────────────────────────────────
 * Single source of truth for ALL Raiti products:
 *   app.raiti.site  |  admin.raiti.site
 *
 * Palette extracted from the live App.
 * Based on Tailwind Zinc (neutrals) + Green-500 (accent).
 *
 * RULES:
 *   1. No new colors may be added without extraction proof.
 *   2. All UI colors MUST reference a --token.
 *   3. Dynamic primary (DB-driven) overrides --primary-rgb only.
 *   4. Brand/third-party icon colors are scoped under --brand-*.
 * ─────────────────────────────────────────────────
 */

:root {
    /* ═══════════════════════════════════
       BACKGROUNDS — Zinc dark scale
       ═══════════════════════════════════ */
    --bg-primary:   #09090b;                    /* zinc-950 — page bg */
    --bg-secondary: #18181b;                    /* zinc-900 — sidebar, secondary */
    --bg-tertiary:  #27272a;                    /* zinc-800 — inputs, elevated */
    --bg-card:      rgba(24, 24, 27, 0.8);      /* zinc-900/80 — cards, glass */
    --bg-glass:     rgba(255, 255, 255, 0.03);  /* frosted glass layer */
    --bg-input:     #1a1a1a;                    /* login input fields */

    /* ═══════════════════════════════════
       TEXT — Zinc light scale
       ═══════════════════════════════════ */
    --text-primary:     #fafafa;    /* zinc-50  — headings, strong */
    --text-secondary:   #a1a1aa;    /* zinc-400 — body, descriptions */
    --text-muted:       #71717a;    /* zinc-500 — captions, labels */
    --text-dim:         #52525b;    /* zinc-600 — disabled, dimmed */
    --text-placeholder: #555555;    /* form placeholders */
    --text-ghost:       #333333;    /* watermarks, version stamps */

    /* ═══════════════════════════════════
       BORDERS
       ═══════════════════════════════════ */
    --border-color: rgba(255, 255, 255, 0.08);  /* default */
    --border-hover: rgba(255, 255, 255, 0.15);  /* hover / active */
    --border-subtle: rgba(255, 255, 255, 0.06); /* very faint */
    --border-visible: rgba(255, 255, 255, 0.1); /* slightly stronger */

    /* ═══════════════════════════════════
       SHADOWS
       ═══════════════════════════════════ */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);

    /* ═══════════════════════════════════
       OVERLAYS
       ═══════════════════════════════════ */
    --overlay-header: rgba(9, 9, 11, 0.8);      /* sticky header backdrop */
    --overlay-modal:  rgba(0, 0, 0, 0.6);        /* modal dimming */

    /* ═══════════════════════════════════
       ACCENT — Primary Green (Raiti)
       Default: #22c55e = rgb(34,197,94)
       Tailwind green-500
       ═══════════════════════════════════ */
    --accent-green:      #22c55e;
    --accent-green-rgb:  34, 197, 94;
    --accent-green-dark: #16a34a;    /* green-600 — gradient endpoint */

    /*
     * --primary-rgb is the DYNAMIC token.
     * Overridden by PHP from `config.primary_color`.
     * Default matches --accent-green-rgb.
     */
    --primary-rgb: 34, 197, 94;

    /* ═══════════════════════════════════
       ACCENT — Status / Semantic
       ═══════════════════════════════════ */
    --accent-blue:       #3b82f6;    /* blue-500 */
    --accent-blue-rgb:   59, 130, 246;
    --accent-purple:     #8b5cf6;    /* violet-500 */
    --accent-purple-rgb: 139, 92, 246;
    --accent-red:        #ef4444;    /* red-500 */
    --accent-red-rgb:    239, 68, 68;
    --accent-yellow:     #eab308;    /* yellow-500 */
    --accent-yellow-rgb: 234, 179, 8;
    --accent-cyan:       #06b6d4;    /* cyan-500 */
    --accent-cyan-rgb:   6, 182, 212;
    --accent-amber:      #f59e0b;    /* amber-500 */
    --accent-amber-rgb:  245, 158, 11;
    --accent-pink:       #ec4899;    /* pink-500 */
    --accent-orange:     #f97316;    /* orange-500 */
    --accent-orange-rgb: 249, 115, 22;

    /* ═══════════════════════════════════
       BRAND — Third-party icons only
       Not for UI components.
       ═══════════════════════════════════ */
    --brand-whatsapp:    #25d366;
    --brand-discord:     #5865f2;
    --brand-telegram:    #0088cc;
    --brand-shopify:     #96bf48;
    --brand-woocommerce: #7f4275;
    --brand-zapier:      #ff4a00;
    --brand-n8n:         #ea4b71;
    --brand-make:        #6d28d9;
    --brand-pabbly:      #1e88e5;
    --brand-mailchimp:   #ffe01b;
    --brand-activecampaign: #356ae6;
    --brand-slack:       #4a154b;
    --brand-google:      #ea4335;
    --brand-magento:     #f26322;
    --brand-opencart:    #23a8e0;
    --brand-nuvemshop:   #2563eb;

    /* ═══════════════════════════════════
       LAYOUT
       ═══════════════════════════════════ */
    --sidebar-width: 260px;
    --header-height: 64px;

    /* ═══════════════════════════════════
       RADII
       ═══════════════════════════════════ */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    /* ═══════════════════════════════════
       TRANSITIONS
       ═══════════════════════════════════ */
    --transition: all 0.2s ease;
}