/* ============================================================
 * FILE: static/css/tokens.css
 * Clarifyr Design System — Tokens (GOLD LEVEL)
 * ============================================================
 * Single source of truth for:
 * - Colors (light, dark, contrast)
 * - Spacing scale
 * - Typography scale
 * - Radius scale
 * - Shadow scale
 * - Z-index scale
 * - Breakpoints
 * - Motion tokens
 * - Focus tokens
 * - Premium/Admin tokens
 * ============================================================
 */

:root {
    /* --------------------------------------------------------
     * COLOR PALETTE — BASE
     * -------------------------------------------------------- */
    --clr-bg: #ffffff;
    --clr-bg-alt: #f7f7f9;
    --clr-bg-muted: #f0f2f5;

    --clr-fg: #111827;
    --clr-fg-muted: #6b7280;
    --clr-fg-soft: #9ca3af;

    --clr-border: #e5e7eb;
    --clr-border-strong: #d1d5db;

    --clr-primary: #2563eb;
    --clr-primary-hover: #1d4ed8;
    --clr-primary-soft: #dbeafe;
    --clr-accent: #2563eb;
    --clr-accent-strong: #1d4ed8;

    --clr-secondary: #7c3aed;
    --clr-secondary-hover: #6d28d9;
    --clr-secondary-soft: #ede9fe;

    --clr-success: #16a34a;
    --clr-success-soft: #dcfce7;

    --clr-warning: #f59e0b;
    --clr-warning-soft: #fef3c7;

    --clr-danger: #dc2626;
    --clr-danger-soft: #fee2e2;

    --clr-info: #0ea5e9;
    --clr-info-soft: #e0f2fe;

    /* --------------------------------------------------------
     * COLOR PALETTE — PREMIUM
     * -------------------------------------------------------- */
    --clr-premium-bg: #0b1020;
    --clr-premium-card: #111827;
    --clr-premium-border: #1f2937;
    --clr-premium-accent: #fbbf24;
    --clr-premium-accent-soft: #fef3c7;
    --clr-premium-fg: #f9fafb;
    --clr-premium-fg-muted: #9ca3af;

    /* --------------------------------------------------------
     * COLOR PALETTE — ADMIN
     * -------------------------------------------------------- */
    --clr-admin-bg: #0f172a;
    --clr-admin-card: #111827;
    --clr-admin-border: #1f2937;
    --clr-admin-accent: #22c55e;
    --clr-admin-accent-soft: #dcfce7;
    --clr-admin-fg: #e5e7eb;
    --clr-admin-fg-muted: #9ca3af;

    /* --------------------------------------------------------
     * COLOR PALETTE — CONTRAST / ACCESSIBILITY
     * -------------------------------------------------------- */
    --clr-contrast-bg: #000000;
    --clr-contrast-fg: #ffffff;
    --clr-contrast-border: #ffffff;
    --clr-contrast-primary: #00ffff;
    --clr-contrast-warning: #ffff00;
    --clr-contrast-danger: #ff0000;

    /* --------------------------------------------------------
     * SPACING SCALE
     * -------------------------------------------------------- */
    --space-0: 0;
    --space-1: 0.25rem;  /* 4px */
    --space-2: 0.5rem;   /* 8px */
    --space-3: 0.75rem;  /* 12px */
    --space-4: 1rem;     /* 16px */
    --space-5: 1.5rem;   /* 24px */
    --space-6: 2rem;     /* 32px */
    --space-7: 3rem;     /* 48px */
    --space-8: 4rem;     /* 64px */

    /* --------------------------------------------------------
     * TYPOGRAPHY SCALE
     * -------------------------------------------------------- */
    --font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;

    --font-size-xs: 0.75rem;   /* 12px */
    --font-size-sm: 0.875rem;  /* 14px */
    --font-size-md: 1rem;      /* 16px */
    --font-size-lg: 1.125rem;  /* 18px */
    --font-size-xl: 1.25rem;   /* 20px */
    --font-size-2xl: 1.5rem;   /* 24px */
    --font-size-3xl: 1.875rem; /* 30px */
    --font-size-4xl: 2.25rem;  /* 36px */

    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* --------------------------------------------------------
     * RADIUS SCALE
     * -------------------------------------------------------- */
    --radius-none: 0;
    --radius-sm: 0.125rem;  /* 2px */
    --radius-md: 0.25rem;   /* 4px */
    --radius-lg: 0.5rem;    /* 8px */
    --radius-xl: 0.75rem;   /* 12px */
    --radius-full: 9999px;

    /* --------------------------------------------------------
     * SHADOW SCALE
     * -------------------------------------------------------- */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08),
                 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.1),
                 0 2px 4px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.15),
                 0 4px 6px rgba(15, 23, 42, 0.1);
    --shadow-xl: 0 20px 25px rgba(15, 23, 42, 0.2),
                 0 10px 10px rgba(15, 23, 42, 0.12);

    /* --------------------------------------------------------
     * Z-INDEX SCALE
     * -------------------------------------------------------- */
    --z-base: 0;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-fixed: 30;
    --z-modal-backdrop: 40;
    --z-modal: 50;
    --z-toast: 60;

    /* --------------------------------------------------------
     * BREAKPOINTS
     * -------------------------------------------------------- */
    --bp-sm: 640px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;
    --bp-2xl: 1536px;

    /* --------------------------------------------------------
     * MOTION TOKENS
     * -------------------------------------------------------- */
    --transition-fast: 120ms ease-out;
    --transition-normal: 180ms ease-out;
    --transition-slow: 240ms ease-out;

    --transition-property-base: color, background-color, border-color,
        box-shadow, transform, opacity;

    /* --------------------------------------------------------
     * FOCUS TOKENS (WCAG 2.2 AA)
     * -------------------------------------------------------- */
    --focus-ring-color: #2563eb;
    --focus-ring-offset: 2px;
    --focus-ring-width: 2px;

    /* --------------------------------------------------------
     * PREMIUM TOKENS
     * -------------------------------------------------------- */
    --premium-border-width: 1px;
    --premium-radius: 0.75rem;
    --premium-shadow: 0 12px 24px rgba(15, 23, 42, 0.35);

    /* --------------------------------------------------------
     * ADMIN TOKENS
     * -------------------------------------------------------- */
    --admin-border-width: 1px;
    --admin-radius: 0.5rem;
    --admin-shadow: 0 8px 16px rgba(15, 23, 42, 0.3);
}

/* ============================================================
 * GENERIC UTILITY CLASSES USING TOKENS
 * ============================================================
 */

/* Typography base */
body {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
    color: var(--clr-fg);
    background-color: var(--clr-bg);
}

/* Text helpers */
.text-muted {
    color: var(--clr-fg-muted);
}

.text-success {
    color: var(--clr-success);
}

.text-warning {
    color: var(--clr-warning);
}

.text-danger {
    color: var(--clr-danger);
}

.text-info {
    color: var(--clr-info);
}

/* Background helpers */
.bg-premium {
    background-color: var(--clr-premium-bg);
    color: var(--clr-premium-fg);
}

.bg-admin {
    background-color: var(--clr-admin-bg);
    color: var(--clr-admin-fg);
}

/* Focus ring (WCAG 2.2 AA) */
.focus-ring {
    outline: none;
}

.focus-ring:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Spacing utilities (basic) */
.m-0 {
    margin: 0;
}

.p-0 {
    padding: 0;
}

.p-4 {
    padding: var(--space-4);
}

.p-6 {
    padding: var(--space-6);
}

.mt-4 {
    margin-top: var(--space-4);
}

.mb-4 {
    margin-bottom: var(--space-4);
}

.mb-6 {
    margin-bottom: var(--space-6);
}

/* Card base (used by metric-card, premium-card, etc.) */
.card-base {
    border-radius: var(--radius-lg);
    border: 1px solid var(--clr-border);
    background-color: var(--clr-bg-alt);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
}

/* Premium card base */
.card-premium {
    border-radius: var(--premium-radius);
    border: var(--premium-border-width) solid var(--clr-premium-border);
    background-color: var(--clr-premium-card);
    box-shadow: var(--premium-shadow);
    color: var(--clr-premium-fg);
}

/* Admin card base */
.card-admin {
    border-radius: var(--admin-radius);
    border: var(--admin-border-width) solid var(--clr-admin-border);
    background-color: var(--clr-admin-card);
    box-shadow: var(--admin-shadow);
    color: var(--clr-admin-fg);
}

/* --------------------------------------------------------
 * CLARIFYR BRAND TOKENS
 * -------------------------------------------------------- */
--brand-purple: #6A4BFF;
--brand-blue: #4B7BFF;
--brand-dark: #1A1A1A;
--brand-light: #F7F7FB;
--brand-gold: #D4AF37;

--brand-gradient: linear-gradient(135deg, var(--brand-purple), var(--brand-blue));