/* BoostHub LK token system (draft v1)
   Scope: personal area only (page wrapper .pagePersonalArea) */

@layer lk-tokens {
    :root {
        /* ---------- Primitive tokens ---------- */
        --lk-font-family-sans: var(--bh-font-sans, "Inter", sans-serif);

        --lk-space-0: 0;
        --lk-space-1: 4px;
        --lk-space-2: 8px;
        --lk-space-3: 12px;
        --lk-space-4: 16px;
        --lk-space-5: 20px;
        --lk-space-6: 24px;
        --lk-space-7: 28px;
        --lk-space-8: 32px;
        --lk-space-9: 40px;

        --lk-radius-xs: 6px;
        --lk-radius-sm: 10px;
        --lk-radius-md: 12px;
        --lk-radius-lg: 16px;
        --lk-radius-xl: 20px;
        --lk-radius-pill: 999px;

        --lk-fs-xs: 12px;
        --lk-fs-sm: 13px;
        --lk-fs-md: 14px;
        --lk-fs-lg: 16px;
        --lk-fs-xl: 20px;
        --lk-fs-2xl: 28px;

        --lk-lh-tight: 1.2;
        --lk-lh-normal: 1.4;
        --lk-lh-relaxed: 1.6;

        --lk-weight-medium: 500;
        --lk-weight-semibold: 600;
        --lk-weight-bold: 700;
        --lk-weight-extrabold: 800;

        --lk-color-white: #ffffff;
        --lk-color-black: #000000;
        --lk-color-slate-950: #0a1018;
        --lk-color-slate-900: #111b29;
        --lk-color-slate-800: #152030;
        --lk-color-slate-700: #334155;
        --lk-color-slate-600: #475569;
        --lk-color-slate-500: #64748b;
        --lk-color-slate-400: #94a3b8;
        --lk-color-slate-300: #cbd5e1;
        --lk-color-slate-200: #e2e8f0;
        --lk-color-slate-100: #f1f5f9;
        --lk-color-slate-50: #f8fafc;

        --lk-color-brand-600: #fe9900;
        --lk-color-brand-500: #ffb84d;
        --lk-color-brand-700: #e08800;

        --lk-color-success-600: #16a34a;
        --lk-color-warning-600: #d97706;
        --lk-color-danger-600: #dc2626;
        --lk-color-info-600: #2563eb;

        --lk-shadow-xs: 0 2px 6px rgba(0, 0, 0, 0.2);
        --lk-shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.2);
        --lk-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.22);
        --lk-shadow-lg: 0 16px 34px rgba(0, 0, 0, 0.24);

        --lk-border-soft: 1px solid rgba(255, 255, 255, 0.08);
        --lk-border-muted: 1px solid rgba(255, 255, 255, 0.12);
        --lk-border-subtle: 1px solid rgba(15, 23, 42, 0.14);
    }

    /* ---------- Semantic tokens (default dark LK theme) ---------- */
    .pagePersonalArea {
        --lk-color-bg-page: #0f1722;
        --lk-color-bg-surface: #162938;
        --lk-color-bg-card: rgba(255, 255, 255, 0.04);
        --lk-color-bg-card-soft: rgba(255, 255, 255, 0.06);
        --lk-color-bg-card-strong: rgba(255, 255, 255, 0.08);
        --lk-color-bg-elevated: rgba(0, 0, 0, 0.2);

        --lk-color-text-primary: rgba(255, 255, 255, 0.95);
        --lk-color-text-secondary: rgba(255, 255, 255, 0.84);
        --lk-color-text-muted: rgba(255, 255, 255, 0.72);
        --lk-color-text-subtle: rgba(255, 255, 255, 0.56);
        --lk-color-text-on-brand: #111b29;

        --lk-color-border-default: rgba(255, 255, 255, 0.1);
        --lk-color-border-focus: rgba(254, 153, 0, 0.45);
        --lk-color-border-strong: rgba(255, 255, 255, 0.16);

        --lk-color-accent: var(--lk-color-brand-600);
        --lk-color-accent-hover: var(--lk-color-brand-500);
        --lk-color-link: var(--lk-color-brand-600);

        --lk-color-state-success: #9fdfb1;
        --lk-color-state-warning: #ffd48a;
        --lk-color-state-danger: #ff8a8a;
        --lk-color-state-info: #93c5fd;
    }

    /* Light surface variant for white cards inside LK */
    .pagePersonalArea .lk-theme-light {
        --lk-color-bg-surface: #ffffff;
        --lk-color-bg-card: #f8fafc;
        --lk-color-bg-card-soft: #ffffff;
        --lk-color-bg-card-strong: #f1f5f9;
        --lk-color-bg-elevated: #ffffff;

        --lk-color-text-primary: #0f172a;
        --lk-color-text-secondary: #334155;
        --lk-color-text-muted: #475569;
        --lk-color-text-subtle: #64748b;
        --lk-color-text-on-brand: #111b29;

        --lk-color-border-default: #e2e8f0;
        --lk-color-border-focus: #94a3b8;
        --lk-color-border-strong: #cbd5e1;

        --lk-color-link: #2563eb;
    }

    /* Auto-apply light semantic palette for white LK cards without markup changes */
    .pagePersonalArea .bhPayout,
    .pagePersonalArea .bhWotTanks,
    .pagePersonalArea .taskTakeWrap .bhWotTanks {
        --lk-color-bg-surface: #ffffff;
        --lk-color-bg-card: #f8fafc;
        --lk-color-bg-card-soft: #ffffff;
        --lk-color-bg-card-strong: #f1f5f9;
        --lk-color-bg-elevated: #ffffff;

        --lk-color-text-primary: #0f172a;
        --lk-color-text-secondary: #334155;
        --lk-color-text-muted: #475569;
        --lk-color-text-subtle: #64748b;
        --lk-color-text-on-brand: #111b29;

        --lk-color-border-default: #e2e8f0;
        --lk-color-border-focus: #94a3b8;
        --lk-color-border-strong: #cbd5e1;
    }

    /* ---------- Component tokens ---------- */
    .pagePersonalArea {
        --lk-sidebar-card-padding: var(--lk-space-5);
        --lk-sidebar-card-radius: var(--lk-radius-xl);
        --lk-sidebar-card-shadow: var(--lk-shadow-md);

        --lk-profile-card-padding: var(--lk-space-6);
        --lk-profile-card-radius: var(--lk-radius-md);

        --lk-widget-padding: var(--lk-space-4);
        --lk-widget-radius: var(--lk-radius-md);
        --lk-widget-title-size: var(--lk-fs-lg);

        --lk-control-height: 44px;
        --lk-control-radius: var(--lk-radius-sm);
        --lk-control-px: var(--lk-space-3);

        --lk-btn-primary-bg: linear-gradient(135deg, #fe9900 0%, #e08800 100%);
        --lk-btn-primary-text: var(--lk-color-text-on-brand);
        --lk-btn-primary-shadow: 0 10px 24px rgba(254, 153, 0, 0.28);
        --lk-btn-primary-soft-bg: rgba(254, 153, 0, 0.12);
        --lk-btn-primary-soft-bg-hover: rgba(254, 153, 0, 0.18);

        --lk-btn-success-bg: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
        --lk-btn-success-bg-hover: linear-gradient(135deg, #1e7e34 0%, #16692b 100%);
        --lk-btn-success-shadow: 0 2px 8px rgba(40, 167, 69, 0.35);
        --lk-btn-success-shadow-hover: 0 4px 12px rgba(40, 167, 69, 0.5);
        --lk-btn-success-shadow-active: 0 2px 6px rgba(40, 167, 69, 0.4);
        --lk-btn-success-shadow-disabled: 0 2px 6px rgba(40, 167, 69, 0.25);

        --lk-btn-info-bg: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
        --lk-btn-info-bg-hover: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
        --lk-btn-info-shadow: 0 2px 8px rgba(37, 99, 235, 0.28);
        --lk-btn-info-shadow-hover: 0 4px 12px rgba(37, 99, 235, 0.4);
        --lk-btn-info-shadow-active: 0 2px 6px rgba(37, 99, 235, 0.35);
        --lk-btn-info-shadow-disabled: 0 2px 6px rgba(37, 99, 235, 0.2);

        --lk-btn-secondary-bg: rgba(255, 255, 255, 0.05);
        --lk-btn-secondary-bg-hover: rgba(255, 255, 255, 0.08);
        --lk-btn-secondary-border: rgba(255, 255, 255, 0.12);
        --lk-btn-secondary-border-hover: rgba(255, 255, 255, 0.18);
        --lk-btn-secondary-text: var(--lk-color-text-primary);

        --lk-btn-danger-text: #ff9f9f;
        --lk-btn-danger-text-hover: #ffc0c0;

        --lk-status-pending-bg: rgba(255, 193, 7, 0.18);
        --lk-status-pending-border: rgba(255, 193, 7, 0.35);
        --lk-status-pending-text: #8a5a00;
        --lk-status-approved-bg: rgba(23, 162, 184, 0.14);
        --lk-status-approved-border: rgba(23, 162, 184, 0.28);
        --lk-status-approved-text: #0c5460;
        --lk-status-paid-bg: rgba(40, 167, 69, 0.14);
        --lk-status-paid-border: rgba(40, 167, 69, 0.28);
        --lk-status-paid-text: #155724;
        --lk-status-rejected-bg: rgba(220, 53, 69, 0.14);
        --lk-status-rejected-border: rgba(220, 53, 69, 0.28);
        --lk-status-rejected-text: #721c24;

        --lk-sla-progress-bg: linear-gradient(90deg, #0b6b2a, #2ecc71);
    }

}

/* Optional utility example for pilot migration */
@layer lk-components {
    .lk-card {
        background: var(--lk-color-bg-card);
        border: 1px solid var(--lk-color-border-default);
        border-radius: var(--lk-widget-radius);
        box-shadow: var(--lk-shadow-sm);
        padding: var(--lk-widget-padding);
        color: var(--lk-color-text-primary);
    }
}