/*
Theme Name:       MarketingOS
Theme URI:        https://example.com/marketingos
Author:           MarketingOS Team
Author URI:       https://example.com
Description:      Custom dashboard theme for MarketingOS — team marketing management system with WhatsApp Web integration.
Version:          1.0.0
Requires at least: 5.8
Requires PHP:     7.4
License:          GPL-2.0-or-later
License URI:      https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:      marketingos
*/

/* ══════════════════════════════════════════════════════════════
   Design System Tokens
   ══════════════════════════════════════════════════════════════ */

:root {
    /* ── Colors ── */
    --mos-primary:        #6366f1;
    --mos-primary-hover:  #4f46e5;
    --mos-primary-light:  #eef2ff;
    --mos-secondary:      #0f172a;
    --mos-accent:         #8b5cf6;
    --mos-bg:             #f8fafc;
    --mos-surface:        #ffffff;
    --mos-text:           #1e293b;
    --mos-text-light:     #64748b;
    --mos-muted:          #94a3b8;
    --mos-border:         #e2e8f0;
    --mos-success:        #10b981;
    --mos-success-light:  #ecfdf5;
    --mos-warning:        #f59e0b;
    --mos-warning-light:  #fffbeb;
    --mos-danger:         #ef4444;
    --mos-danger-light:   #fef2f2;
    --mos-info:           #3b82f6;
    --mos-info-light:     #eff6ff;

    /* ── Sidebar ── */
    --mos-sidebar-bg:        #0f172a;
    --mos-sidebar-text:      #cbd5e1;
    --mos-sidebar-active:    #6366f1;
    --mos-sidebar-hover-bg:  #1e293b;
    --mos-sidebar-width:     260px;

    /* ── Typography ── */
    --mos-font-en:    'Inter', system-ui, -apple-system, sans-serif;
    --mos-font-ar:    'Cairo', 'Tajawal', system-ui, sans-serif;
    --mos-font-body:  var(--mos-font-en);
    --mos-text-xs:    0.75rem;
    --mos-text-sm:    0.875rem;
    --mos-text-base:  1rem;
    --mos-text-lg:    1.125rem;
    --mos-text-xl:    1.25rem;
    --mos-text-2xl:   1.5rem;
    --mos-text-3xl:   1.875rem;

    /* ── Radius ── */
    --mos-radius-sm:  4px;
    --mos-radius-md:  8px;
    --mos-radius-lg:  12px;
    --mos-radius-xl:  16px;

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

    /* ── Spacing (4px scale) ── */
    --mos-space-1:   4px;
    --mos-space-2:   8px;
    --mos-space-3:   12px;
    --mos-space-4:   16px;
    --mos-space-5:   20px;
    --mos-space-6:   24px;
    --mos-space-8:   32px;
    --mos-space-10:  40px;
    --mos-space-12:  48px;

    /* ── Transitions ── */
    --mos-transition: 150ms ease;
    --mos-transition-slow: 300ms ease;
}

/* RTL font override */
[dir="rtl"] {
    --mos-font-body: var(--mos-font-ar);
}

/* ── Global Reset ── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--mos-font-body);
    font-size: var(--mos-text-base);
    line-height: 1.6;
    color: var(--mos-text);
    background: var(--mos-bg);
}

a {
    color: var(--mos-primary);
    text-decoration: none;
}

a:hover {
    color: var(--mos-primary-hover);
}

img {
    max-width: 100%;
    height: auto;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    color: var(--mos-text);
}

h1 { font-size: var(--mos-text-3xl); }
h2 { font-size: var(--mos-text-2xl); }
h3 { font-size: var(--mos-text-xl); }
h4 { font-size: var(--mos-text-lg); }