/* Digias Design Tokens — Cyber SaaS · #547E72 + #000000 only */
:root {
    --primary: #547E72;
    --primary-rgb: 84, 126, 114;
    --primary-light: rgba(84, 126, 114, 0.72);
    --primary-mid: rgba(84, 126, 114, 0.48);
    --primary-dark: rgba(84, 126, 114, 0.32);
    --primary-glow: rgba(84, 126, 114, 0.22);
    --accent-rgb: 84, 126, 114;

    --bg: #000000;
    --bg-dark: #000000;
    --bg-card: rgba(84, 126, 114, 0.10);
    --bg-card-hover: rgba(84, 126, 114, 0.16);
    --bg-input: rgba(0, 0, 0, 0.45);
    --bg-surface: #000000;
    --surface: rgba(84, 126, 114, 0.10);
    --surface-2: rgba(84, 126, 114, 0.05);

    --text: #ffffff;
    --text-dim: #b8c2c8;
    --text-muted: #8a969e;
    --border: rgba(255, 255, 255, 0.12);
    --glass-border: rgba(255, 255, 255, 0.12);
    --border-light: rgba(84, 126, 114, 0.28);

    /* Semantic — derived from primary only */
    --danger: rgba(84, 126, 114, 0.35);
    --success: #547E72;
    --warning: rgba(84, 126, 114, 0.55);
    --paypal: rgba(84, 126, 114, 0.65);

    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 28px;

    --glass-fill: rgba(84, 126, 114, 0.10);
    --glass-fill-strong: rgba(84, 126, 114, 0.16);
    --glass-fill-light: rgba(84, 126, 114, 0.05);
    --glass-border: rgba(255, 255, 255, 0.07);
    --glass-border-accent: rgba(84, 126, 114, 0.30);
    --glass-blur: 24px;
    --glass-blur-heavy: 40px;
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.50);
    --glass-glow: 0 0 40px rgba(84, 126, 114, 0.14);
    --glass-glow-sm: 0 0 20px rgba(84, 126, 114, 0.10);
    --glass-reflect: inset 0 1px 0 rgba(255, 255, 255, 0.08);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55);

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 0.2s;
    --duration-normal: 0.32s;

    --gradient-brand: linear-gradient(135deg, rgba(84, 126, 114, 0.55) 0%, rgba(84, 126, 114, 0.22) 100%);
    --gradient-mesh: radial-gradient(ellipse 80% 50% at 15% -8%, rgba(84, 126, 114, 0.18), transparent 55%);

    --font-ar: 'Tajawal', system-ui, sans-serif;
    --font-en: 'Inter', system-ui, sans-serif;

    color-scheme: dark;
}

html[lang='en'] body {
    font-family: var(--font-en);
}

html[lang='ar'] body {
    font-family: var(--font-ar);
}