/*
 * Leadplatform Design Tokens (Welle 1)
 * Three-layer system: Primitive → Semantic → Component
 * No layout rules — values only.
 */

:root {
    /* ============================================================
     * 1) PRIMITIVE
     * ============================================================ */

    /* Slate / Neutral */
    --color-slate-50: #F8FAFC;
    --color-slate-100: #F1F5F9;
    --color-slate-200: #E2E8F0;
    --color-slate-400: #94A3B8;
    --color-slate-500: #64748B;
    --color-slate-600: #475569;
    --color-slate-900: #0F172A;

    /* Brand greens / blues (raw) */
    --color-green-600: #2E8E6B;
    --color-green-700: #267A5C;
    --color-blue-600: #1F6FEB;
    --color-blue-700: #175DC2;
    --color-blue-slate-600: #2E6B8E;

    /* Status raw */
    --color-green-success: #15803D;
    --color-green-success-soft: #DCFCE7;
    --color-amber-warning: #B45309;
    --color-amber-warning-soft: #FEF3C7;
    --color-red-destructive: #DC2626;
    --color-red-destructive-soft: #FEE2E2;

    --color-white: #FFFFFF;

    /* Spacing (4px base) */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */

    /* Typography scale */
    --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
        system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-body: 1.5;
    --line-height-heading: 1.25;

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 10px;
    --radius-full: 9999px;

    /* Shadow */
    --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.05);
    --shadow-md: 0 4px 12px rgb(15 23 42 / 0.08);
    --shadow-lg: 0 8px 24px rgb(15 23 42 / 0.10);

    /* Motion */
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;
    --ease-standard: ease;

    /* ============================================================
     * 2) SEMANTIC
     * ============================================================ */

    --color-primary: #2E8E6B;
    --color-primary-hover: #267A5C;
    --color-primary-foreground: #FFFFFF;
    --color-primary-superuser: #2E6B8E;

    --color-accent: #1F6FEB;
    --color-accent-hover: #175DC2;
    --color-accent-foreground: #FFFFFF;

    --color-background: #F8FAFC;
    --color-surface: #FFFFFF;
    --color-foreground: #0F172A;

    --color-muted: #F1F5F9;
    --color-muted-foreground: #475569;

    --color-border: #E2E8F0;

    --color-success: #15803D;
    --color-success-soft: #DCFCE7;
    --color-warning: #B45309;
    --color-warning-soft: #FEF3C7;
    --color-destructive: #DC2626;
    --color-destructive-soft: #FEE2E2;

    --color-ring: var(--color-primary);

    /* ============================================================
     * 3) COMPONENT
     * ============================================================ */

    --button-bg: var(--color-primary);
    --button-fg: var(--color-primary-foreground);
    --button-bg-hover: var(--color-primary-hover);
    --button-radius: var(--radius-lg);
    --button-padding-y: 0.5rem;
    --button-padding-x: 1rem;

    --card-bg: var(--color-surface);
    --card-border: var(--color-border);
    --card-radius: var(--radius-xl);
    --card-padding: var(--space-4);
    --card-shadow: var(--shadow-sm);

    --table-header-bg: var(--color-muted);
    --table-row-hover: var(--color-slate-50);
    --table-border: var(--color-border);

    --input-border: var(--color-border);
    --input-radius: var(--radius-md);
    --input-focus-ring: var(--color-ring);

    --badge-success-bg: var(--color-success-soft);
    --badge-success-fg: var(--color-success);
    --badge-warning-bg: var(--color-warning-soft);
    --badge-warning-fg: var(--color-warning);
    --badge-danger-bg: var(--color-destructive-soft);
    --badge-danger-fg: var(--color-destructive);

    --sidebar-bg: var(--color-surface);
    --sidebar-active-bg: var(--color-muted);
    --sidebar-active-fg: var(--color-primary);

    --header-bg: var(--color-primary);

    /* ============================================================
     * 4) TRANSITIONAL ALIASES (existing --lp-* / Django bridges)
     * ============================================================ */

    --lp-primary: var(--color-accent);
    --lp-primary-hover: var(--color-accent-hover);
    --lp-border: var(--color-border);
    --lp-muted: var(--color-muted-foreground);
    --lp-soft: var(--color-muted);
    --lp-bg-soft: var(--color-muted);
    --lp-success: var(--color-success);
    --lp-success-bg: var(--color-success-soft);
    --lp-success-text: var(--color-success);
    --lp-danger: var(--color-destructive);
    --lp-card-shadow: var(--shadow-md);
}