/* ═══════════════════════════════════════════════════════════
   Writademic — Shared Design Tokens
   Import this file first in every page before any other CSS.
   ═══════════════════════════════════════════════════════════ */

:root {
    /* ── Brand ── */
    --brand-indigo:  #5046e4;
    --brand-indigo-dark: #4338ca;
    --brand-sky:     #0ea5e9;
    --brand-purple:  #7c3aed;
    --brand-green:   #10b981;

    /* ── Gradient ── */
    --grad-brand:    linear-gradient(135deg, #5046e4, #0ea5e9);
    --grad-text:     linear-gradient(120deg, #a78bfa 0%, #38bdf8 100%);

    /* ── Dark theme surfaces (landing, pricing) ── */
    --dark:          #060c17;
    --dark-2:        #0a1220;
    --dark-3:        #0f1a2e;
    --dark-border:   rgba(255,255,255,0.07);
    --dark-border-2: rgba(255,255,255,0.11);

    /* ── Light theme surfaces (dashboard, app) ── */
    --light:         #f8fafc;
    --light-2:       #ffffff;
    --light-border:  #e2e8f0;

    /* ── Text ── */
    --text-dark:       #0f172a;
    --text-dark-muted: #64748b;
    --text-light:      rgba(255,255,255,0.92);
    --text-light-muted:rgba(255,255,255,0.5);

    /* ── Semantic ── */
    --color-success: #10b981;
    --color-error:   #ef4444;
    --color-warning: #f59e0b;

    /* ── Typography ── */
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Space Grotesk', 'Outfit', var(--font-sans);

    /* ── Radii ── */
    --radius-sm:  6px;
    --radius-md:  10px;
    --radius-lg:  14px;
    --radius-xl:  20px;
    --radius-full:9999px;

    /* ── Transitions ── */
    --ease:  cubic-bezier(0.4, 0, 0.2, 1);
    --trans: 0.18s var(--ease);
}