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

/* ── Geist (self-hosted, no third-party CDN, GDPR-friendly) ─── */
@font-face {
    font-family: 'Geist';
    src: url('/static/fonts/geist/Geist-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geist';
    src: url('/static/fonts/geist/Geist-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geist';
    src: url('/static/fonts/geist/Geist-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geist';
    src: url('/static/fonts/geist/Geist-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geist Mono';
    src: url('/static/fonts/geist/GeistMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geist Mono';
    src: url('/static/fonts/geist/GeistMono-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

: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);

    /* Geist — used in new editor surfaces (Focus Write, document editor). The
       existing dashboard chrome keeps Inter so we don't break visual identity. */
    --font-editor:    'Geist', 'Inter', system-ui, -apple-system, sans-serif;
    --font-prose:     'Lora', Georgia, 'Times New Roman', serif;
    --font-mono:      'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* ── Type scale (used by new components; existing chrome keeps its sizes) ── */
    --fs-xs:   11px;
    --fs-sm:   12.5px;
    --fs-base: 14px;
    --fs-md:   16px;
    --fs-lg:   18px;
    --fs-xl:   22px;
    --fs-2xl:  28px;
    --fs-3xl:  36px;

    /* ── Line heights ── */
    --lh-tight: 1.25;
    --lh-snug:  1.4;
    --lh-base:  1.55;
    --lh-relaxed: 1.7;

    /* ── Letter spacing ── */
    --tracking-tight:  -0.015em;
    --tracking-normal:  0;
    --tracking-wide:    0.06em;

    /* ── 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);
}