/* ============================================
   Katana-v2 Design Tokens
   Pixel-Perfect Mockup Reproduction
   ============================================ */

:root {
    /* ---- Primary Colors ---- */
    --k-primary: #005C94;
    --k-primary-light: #e8f4f8;
    --k-primary-hover: #004a77;
    --k-accent: #039FC0;

    /* ---- Text ---- */
    --k-text-primary: #1a1d1f;
    --k-text-secondary: #6f767e;
    --k-text-tertiary: #9a9fa5;
    --k-text-on-primary: #ffffff;

    /* ---- Backgrounds ---- */
    --k-bg-page: #F4F7F9;
    --k-bg-page-gradient: linear-gradient(135deg, #F4F7F9 0%, #EEF3F8 25%, #F0F4F7 50%, #F2F0F6 75%, #F4F7F9 100%);
    --k-bg-card: #ffffff;
    --k-bg-sidebar: rgba(255, 255, 255, 0.65);
    --k-sidebar-blur: blur(60px);
    --k-bg-content: transparent;
    --k-bg-input: #ffffff;
    --k-bg-hover: rgba(255, 255, 255, 0.50);

    /* ---- Sidebar ---- */
    --k-sidebar-active-bg: #E0F2FE;
    --k-sidebar-active-text: #0369A1;
    --k-sidebar-active-border: transparent;

    /* ---- Borders ---- */
    --k-border-light: #eaecf0;
    --k-border-input: #d1d5db;
    --k-border-focus: #1d4ed8;

    /* ---- Shadows ---- */
    --k-shadow-card: 0 1px 2px rgba(16, 24, 40, 0.05);
    --k-shadow-card-hover: 0 4px 6px -1px rgba(16, 24, 40, 0.1), 0 2px 4px -2px rgba(16, 24, 40, 0.05);
    --k-shadow-sidebar: 4px 0 24px rgba(0, 0, 0, 0.02);
    --k-shadow-content: none;

    /* ---- Radii ---- */
    --k-radius-sm: 6px;
    --k-radius-md: 8px;
    --k-radius-lg: 12px;
    --k-radius-xl: 16px;
    --k-radius-2xl: 24px;
    --k-radius-pill: 9999px;

    /* ---- Spacing ---- */
    --k-sidebar-width: 240px;
    --k-sidebar-collapsed: 72px;
    --k-content-padding: 32px;

    /* ---- Typography ---- */
    --k-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --k-font-size-xs: 11px;
    --k-font-size-sm: 13px;
    --k-font-size-base: 14px;
    --k-font-size-md: 15px;
    --k-font-size-lg: 18px;
    --k-font-size-xl: 24px;
    --k-font-size-2xl: 28px;
    --k-font-size-3xl: 32px;
    --k-font-weight-normal: 400;
    --k-font-weight-medium: 500;
    --k-font-weight-semibold: 600;
    --k-font-weight-bold: 700;
    --k-line-height: 1.5;

    /* ---- Easings (Apple HIG Spring) ---- */
    --k-ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
    --k-ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
    --k-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ---- Welcome Banner ---- */
    --k-banner-gradient: linear-gradient(135deg, #E4F3F7 0%, #EBF0F8 25%, #F0EBF5 50%, #F8EDE8 75%, #EFF5F3 100%);

    /* ---- Sidebar Ambient Glow ---- */
    --k-sidebar-glow: rgba(125, 211, 252, 0.30);

    /* ---- Stat Card Icon Tints ---- */
    --k-icon-teal-bg: #e0f2f1;
    --k-icon-teal-fg: #00897b;
    --k-icon-blue-bg: #e3f2fd;
    --k-icon-blue-fg: #1565c0;
    --k-icon-cyan-bg: #e0f7fa;
    --k-icon-cyan-fg: #00838f;
    --k-icon-orange-bg: #fff3e0;
    --k-icon-orange-fg: #e65100;
    --k-icon-green-bg: #e8f5e9;
    --k-icon-green-fg: #2e7d32;
    --k-icon-primary-bg: #e8f4f8;
    --k-icon-primary-fg: #005C94;

    /* ---- Badge Colors ---- */
    --k-badge-active-bg: #e6f4ea;
    --k-badge-active-text: #1e7e34;
    --k-badge-pending-bg: #fff8e1;
    --k-badge-pending-text: #f57f17;
    --k-badge-closed-bg: #fce8e6;
    --k-badge-closed-text: #c62828;
    --k-badge-info-bg: #e8f4f8;
    --k-badge-info-text: #005C94;

    /* ---- Transitions ---- */
    --k-transition-fast: 150ms;
    --k-transition-base: 250ms;
    --k-transition-slow: 400ms;

    /* ---- Glass / Frosted ---- */
    --k-glass-bg: rgba(255, 255, 255, 0.72);
    --k-glass-blur: blur(24px);
    --k-glass-border: rgba(255, 255, 255, 0.18);
    --k-overlay-bg: rgba(0, 0, 0, 0.45);

    /* ---- Surface Materials ---- */
    --k-surface-glass: rgba(255, 255, 255, 0.55);
    --k-surface-glass-border: rgba(255, 255, 255, 0.65);
    --k-surface-card-glow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 3px rgba(16, 24, 40, 0.06);
    --k-noise-opacity: 0.025;

    /* ---- Skeleton Loading ---- */
    --k-skeleton-base: #e8ecef;
    --k-skeleton-shimmer: linear-gradient(90deg, #e8ecef 25%, #f4f7f9 50%, #e8ecef 75%);

    /* ---- Shadow Hierarchy ---- */
    --k-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
    --k-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08);
    --k-shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.10);
    --k-shadow-lg: 0 12px 24px -4px rgba(16, 24, 40, 0.12);
    --k-shadow-xl: 0 20px 48px -8px rgba(16, 24, 40, 0.16);
}