/*
 * ===================================================================
 * BUSINESS KHATA — SITE DESIGN TOKENS (admin + public + auth)
 * Main UI: pure black / white / neutral gray (no blue-gray).
 * Green: --brand-accent — chips/badges, status, growth (not button icons).
 * Light + dark theme variables.
 * ===================================================================
 */

 :root {
    /* === ACCENT — brand green (growth, success badges, key icons) === */
    --brand-accent: #22c55e;
    --brand-accent-400: #4ade80;
    --brand-accent-600: #16a34a;

    /* === PRIMARY — solid black actions (light mode) === */
    --primary: #000000;
    --primary-400: #404040;
    --primary-600: #171717;
    --primary-foreground: #ffffff;

    /* === SECONDARY === */
    --secondary: #171717;

    /* === NEUTRAL PALETTE (true neutral, no slate blue) === */
    --white: #ffffff;
    --black: #000000;
    --gray-50: #fafafa;
    --gray-100: #f5f5f5;
    --gray-200: #e5e5e5;
    --gray-300: #d4d4d4;
    --gray-400: #a3a3a3;
    --gray-500: #737373;
    --gray-600: #525252;
    --gray-700: #404040;
    --gray-800: #262626;
    --gray-900: #171717;

    /* === SEMANTIC COLORS === */
    --success: #10b981;
    --success-light: #d1fae5;
    --success-dark: #047857;
    --warning: #f59e0b;
    --warning-light: #fef3c7;
    --warning-dark: #d97706;
    --danger: #ef4444;
    --danger-light: #fee2e2;
    --danger-dark: #dc2626;
    --info: #3b82f6;
    --info-light: #dbeafe;
    --info-dark: #1d4ed8;

    /* === LIGHT THEME — SURFACES & TEXT === */
    --bg-primary: var(--white);
    --bg-secondary: var(--gray-50);
    --bg-tertiary: var(--gray-100);
    --rev-bg-primary: var(--white);
    --rev-bg-secondary: var(--bg-secondary);
    --bg-primary-rgb: 255, 255, 255;
    --bg-secondary-rgb: 250, 250, 250;

    --text-primary: var(--black);
    --text-secondary: var(--gray-600);
    --text-tertiary: var(--gray-800);
    --text-inverse: var(--white);
    --text-muted: var(--gray-500);

    --border-primary: var(--gray-300);
    --border-secondary: var(--gray-200);
    --border-tertiary: var(--gray-100);
    --border-hover: var(--border-primary);

    --surface-primary: var(--white);
    --icon-inverse: var(--white);

    /* === SHARED PAGE SURFACES (admin adm-* + public bk-*) === */
    --site-page-light: #fafafa;
    --site-page-dark: #050505;
    --site-surface-light: #ffffff;
    --site-surface-dark: #0d0d0d;
    --site-border-light: #e5e5e5;
    --site-border-dark: #1a1a1a;
    --site-border-subtle-light: #f5f5f5;
    --site-border-subtle-dark: #131313;

    /* Public marketing aliases — keep in sync with admin-shell adm-* tokens */
    --bk-green: var(--brand-accent);
    --bk-red: #ef4444;
    --bk-dark-bg: var(--site-page-dark);
    --bk-dark-surface: var(--site-surface-dark);
    --bk-light-bg: var(--site-page-light);
    --bk-light-border: var(--site-border-light);
    --bk-dark-border: var(--site-border-dark);
    --bk-light-elevated: var(--gray-100);
    --bk-white: var(--white);
    --bk-black: var(--black);
    --bk-slate-900: var(--black);
    --bk-slate-800: #171717;
    --bk-slate-700: var(--gray-700);
    --bk-slate-600: var(--gray-600);
    --bk-slate-500: var(--gray-500);
    --bk-slate-400: var(--gray-400);
    --bk-slate-300: var(--gray-300);
    --bk-slate-200: var(--site-border-light);
    --bk-slate-100: var(--gray-100);
    --bk-slate-50: var(--site-page-light);
    --bk-zinc-300: var(--gray-300);
    --bk-zinc-400: var(--gray-400);
    --bk-zinc-500: var(--gray-500);
    --bk-zinc-700: var(--gray-700);
    --bk-zinc-800: var(--gray-800);
    --bk-zinc-900: var(--gray-900);
    --bk-shadow-soft-light: none;
    --bk-shadow-soft-dark: none;
    --bk-shadow-soft: none;

    /* === TYPOGRAPHY === */
    --font-family-primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;

    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;

    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    /* === SPACING === */
    --space-1: 0.25rem;
    --space-1_5: 0.375rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-8: 2rem;

    /* === BORDER RADIUS === */
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-pill: 9999px;

    /* === BORDER WIDTH === */
    --border-width: 1px;
    --border-width-2: 2px;

    /* === SHADOWS === */
    --shadow-sm: none;
    --shadow-base: none;
    --shadow-md: none;

    /* === TRANSITIONS === */
    --duration-200: 200ms;
    --duration-300: 300ms;
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-all: all var(--duration-300) var(--ease-in-out);
    --transition-colors: color var(--duration-200) var(--ease-out),
                         background-color var(--duration-200) var(--ease-out),
                         border-color var(--duration-200) var(--ease-out);

    /* === COMPONENT SIZING === */
    --input-height: 48px;

    /* === FORM LAYOUT (radius + rhythm; shared by form-new + toolbars) === */
    --form-control-radius: var(--radius-2xl);
    --form-label-input-gap: 0.625rem;
    --form-field-spacing-y: 1.5rem;

    /* === FORM CONTROL (LIGHT) === */
    --input-bg: var(--bg-secondary);
    --input-focus-bg: var(--white);
    --input-disabled-bg: var(--bg-tertiary);
    --placeholder-color: var(--text-muted);

    /* === LEGACY ALIASES (still referenced in code) === */
    --border-color: var(--border-primary);
    --text-dark: var(--text-primary);
    --text-light: var(--white);

    /* === NOTIFICATION SHADOW (alerts.css) === */
    --notification-shadow:
        0 8px 24px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);

    /* === SEMANTIC GRADIENTS (alerts.css notifications) === */
    --success-gradient-start: rgba(16, 185, 129, 0.15);
    --success-gradient-end: rgba(16, 185, 129, 0.05);
    --success-border: rgb(16 185 129 / 48%);
    --success-shadow: rgba(16, 185, 129, 0.15);
    --success-text-gradient-start: #10b981;
    --success-text-gradient-end: #059669;

    --error-gradient-start: rgba(239, 68, 68, 0.15);
    --error-gradient-end: rgba(239, 68, 68, 0.05);
    --error-border: rgb(239 68 68 / 43%);
    --error-shadow: rgba(239, 68, 68, 0.15);
    --error-text-gradient-start: #ef4444;
    --error-text-gradient-end: #dc2626;

    --warning-gradient-start: rgba(245, 158, 11, 0.15);
    --warning-gradient-end: rgba(245, 158, 11, 0.05);
    --warning-border: rgb(245 158 11 / 58%);
    --warning-shadow: rgba(245, 158, 11, 0.15);
    --warning-text-gradient-start: #f59e0b;
    --warning-text-gradient-end: #d97706;

    --info-gradient-start: rgba(59, 130, 246, 0.15);
    --info-gradient-end: rgba(59, 130, 246, 0.05);
    --info-border: rgb(59 130 246 / 32%);
    --info-shadow: rgba(59, 130, 246, 0.15);
    --info-text-gradient-start: #3b82f6;
    --info-text-gradient-end: #2563eb;
}

/*
 * ===================================================================
 * DARK THEME OVERRIDES
 * Dark palette aligned with admin shell (sajidhadi-style surfaces).
 * ===================================================================
 */
[data-theme="dark"] {
    --primary: #ffffff;
    --primary-400: #e5e5e5;
    --primary-600: #d4d4d4;
    --primary-foreground: #000000;
    --secondary: #27272a;
    --bg-primary: #050505;
    --bg-secondary: #0d0d0d;
    --bg-tertiary: #131313;
    --rev-bg-primary: var(--bg-secondary);
    --rev-bg-secondary: var(--bg-primary);
    --bg-primary-rgb: 5, 5, 5;
    --bg-secondary-rgb: 13, 13, 13;
    --text-primary: var(--white);
    --text-secondary: var(--gray-300);
    --text-tertiary: var(--gray-400);
    --text-muted: var(--gray-500);
    --border-primary: #252525;
    --border-secondary: #1a1a1a;
    --border-tertiary: #131313;
    --border-hover: var(--border-primary);
    --surface-primary: #0d0d0d;
    --icon-inverse: var(--white);
    --input-bg: #131313;
    --input-focus-bg: #181818;
    --input-disabled-bg: #0a0a0a;
    --site-surface-dark: #0d0d0d;
    --site-border-subtle-dark: #131313;
    --shadow-sm: none;
    --shadow-base: none;
    --shadow-md: none;
    --border-color: var(--border-primary);
    --text-dark: var(--text-primary);
    --notification-shadow:
        0 8px 24px rgba(0, 0, 0, 0.25),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    --success-gradient-start: rgba(16, 185, 129, 0.2);
    --success-gradient-end: rgba(16, 185, 129, 0.1);
    --success-border: rgba(16, 185, 129, 0.25);
    --error-gradient-start: rgba(239, 68, 68, 0.2);
    --error-gradient-end: rgba(239, 68, 68, 0.1);
    --error-border: rgba(239, 68, 68, 0.25);
    --warning-gradient-start: rgba(245, 158, 11, 0.2);
    --warning-gradient-end: rgba(245, 158, 11, 0.1);
    --warning-border: rgba(245, 158, 11, 0.25);
    --info-gradient-start: rgba(59, 130, 246, 0.2);
    --info-gradient-end: rgba(59, 130, 246, 0.1);
    --info-border: rgba(59, 130, 246, 0.25);
}