/* ==========================================================================
   PTCCB Design System Tokens
   Modern SaaS-style design system with teal/blue palette
   ========================================================================== */

:root {
    /* ===== Color Palette ===== */

    /* Primary - Teal */
    --color-primary-50: #f0fdfa;
    --color-primary-100: #ccfbf1;
    --color-primary-200: #99f6e4;
    --color-primary-300: #5eead4;
    --color-primary-400: #2dd4bf;
    --color-primary-500: #14b8a6;
    --color-primary-600: #0d9488;
    --color-primary-700: #0f766e;
    --color-primary-800: #115e59;
    --color-primary-900: #134e4a;
    --color-primary: var(--color-primary-600);
    --color-primary-hover: var(--color-primary-700);
    --color-primary-light: var(--color-primary-50);
    --color-primary-ring: rgba(13, 148, 136, 0.2);

    /* Secondary - Navy/Slate */
    --color-secondary-50: #f8fafc;
    --color-secondary-100: #f1f5f9;
    --color-secondary-200: #e2e8f0;
    --color-secondary-300: #cbd5e1;
    --color-secondary-400: #94a3b8;
    --color-secondary-500: #64748b;
    --color-secondary-600: #475569;
    --color-secondary-700: #334155;
    --color-secondary-800: #1e293b;
    --color-secondary-900: #0f172a;

    /* Success - Emerald */
    --color-success-50: #ecfdf5;
    --color-success-100: #d1fae5;
    --color-success-200: #a7f3d0;
    --color-success-400: #34d399;
    --color-success-500: #10b981;
    --color-success-600: #059669;
    --color-success-700: #047857;
    --color-success: var(--color-success-600);
    --color-success-light: var(--color-success-50);

    /* Danger - Rose */
    --color-danger-50: #fff1f2;
    --color-danger-100: #ffe4e6;
    --color-danger-200: #fecdd3;
    --color-danger-400: #fb7185;
    --color-danger-500: #f43f5e;
    --color-danger-600: #e11d48;
    --color-danger-700: #be123c;
    --color-danger: var(--color-danger-600);
    --color-danger-light: var(--color-danger-50);

    /* Warning - Amber */
    --color-warning-50: #fffbeb;
    --color-warning-100: #fef3c7;
    --color-warning-200: #fde68a;
    --color-warning-400: #fbbf24;
    --color-warning-500: #f59e0b;
    --color-warning-600: #d97706;
    --color-warning-700: #b45309;
    --color-warning: var(--color-warning-600);
    --color-warning-light: var(--color-warning-50);

    /* Info - Sky */
    --color-info-50: #f0f9ff;
    --color-info-100: #e0f2fe;
    --color-info-200: #bae6fd;
    --color-info-400: #38bdf8;
    --color-info-500: #0ea5e9;
    --color-info-600: #0284c7;
    --color-info-700: #0369a1;
    --color-info: var(--color-info-600);
    --color-info-light: var(--color-info-50);

    /* Accent - Violet (for special highlights) */
    --color-accent-50: #f5f3ff;
    --color-accent-100: #ede9fe;
    --color-accent-500: #8b5cf6;
    --color-accent-600: #7c3aed;
    --color-accent: var(--color-accent-600);

    /* ===== Semantic Colors ===== */
    --color-body-bg: #f1f5f9;
    --color-surface: #ffffff;
    --color-surface-hover: var(--color-secondary-50);
    --color-border: var(--color-secondary-200);
    --color-border-light: var(--color-secondary-100);
    --color-text: var(--color-secondary-800);
    --color-text-secondary: var(--color-secondary-500);
    --color-text-muted: var(--color-secondary-400);
    --color-text-heading: var(--color-secondary-900);
    --color-link: var(--color-primary-600);
    --color-link-hover: var(--color-primary-700);

    /* Sidebar - Dark Navy */
    --sidebar-bg: var(--color-secondary-800);
    --sidebar-border: var(--color-secondary-700);
    --sidebar-text: var(--color-secondary-300);
    --sidebar-text-hover: #ffffff;
    --sidebar-active-bg: rgba(13, 148, 136, 0.15);
    --sidebar-active-text: var(--color-primary-300);
    --sidebar-active-icon: var(--color-primary-400);
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 72px;

    /* Header */
    --header-bg: var(--color-surface);
    --header-border: var(--color-border);
    --header-height: 64px;

    /* ===== Typography ===== */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.8125rem;  /* 13px */
    --font-size-base: 0.875rem; /* 14px */
    --font-size-md: 0.9375rem;  /* 15px */
    --font-size-lg: 1.0625rem;  /* 17px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */
    --font-size-4xl: 2.25rem;   /* 36px */

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

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* ===== Spacing ===== */
    --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.25rem;  /* 20px */
    --space-6: 1.5rem;   /* 24px */
    --space-8: 2rem;     /* 32px */
    --space-10: 2.5rem;  /* 40px */
    --space-12: 3rem;    /* 48px */
    --space-16: 4rem;    /* 64px */

    /* ===== Border Radius ===== */
    --radius-sm: 0.375rem;  /* 6px */
    --radius-md: 0.5rem;    /* 8px */
    --radius-lg: 0.75rem;   /* 12px */
    --radius-xl: 1rem;      /* 16px */
    --radius-2xl: 1.5rem;   /* 24px */
    --radius-full: 9999px;

    /* ===== Shadows ===== */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.07), 0 1px 2px -1px rgba(0, 0, 0, 0.07);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -4px rgba(0, 0, 0, 0.07);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.07), 0 8px 10px -6px rgba(0, 0, 0, 0.07);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);

    /* Focus ring */
    --shadow-focus: 0 0 0 3px var(--color-primary-ring);
    --shadow-focus-danger: 0 0 0 3px rgba(225, 29, 72, 0.2);
    --shadow-focus-success: 0 0 0 3px rgba(5, 150, 105, 0.2);

    /* ===== Transitions ===== */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ===== Z-Index Scale ===== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-loading: 9999;
}

/* ===== Custom Scrollbar ===== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-secondary-300);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-secondary-400);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-secondary-300) transparent;
}

/* ===== Utility Classes ===== */

/* Text colors */
.text-primary { color: var(--color-primary) !important; }
.text-success { color: var(--color-success) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-info { color: var(--color-info) !important; }
.text-muted { color: var(--color-text-muted) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-heading { color: var(--color-text-heading) !important; }

/* Background colors */
.bg-primary { background-color: var(--color-primary) !important; }
.bg-success { background-color: var(--color-success) !important; }
.bg-danger { background-color: var(--color-danger) !important; }
.bg-warning { background-color: var(--color-warning) !important; }
.bg-info { background-color: var(--color-info) !important; }
.bg-surface { background-color: var(--color-surface) !important; }

/* Light backgrounds */
.bg-light-primary { background-color: var(--color-primary-light) !important; }
.bg-light-success { background-color: var(--color-success-light) !important; }
.bg-light-danger { background-color: var(--color-danger-light) !important; }
.bg-light-warning { background-color: var(--color-warning-light) !important; }
.bg-light-info { background-color: var(--color-info-light) !important; }

/* Border colors */
.border-primary { border-color: var(--color-primary) !important; }
.border-success { border-color: var(--color-success) !important; }
.border-danger { border-color: var(--color-danger) !important; }
.border-warning { border-color: var(--color-warning) !important; }
.border-info { border-color: var(--color-info) !important; }

/* Font sizes */
.font-xs { font-size: var(--font-size-xs) !important; }
.font-sm { font-size: var(--font-size-sm) !important; }
.font-base { font-size: var(--font-size-base) !important; }
.font-md { font-size: var(--font-size-md) !important; }
.font-lg { font-size: var(--font-size-lg) !important; }
.font-xl { font-size: var(--font-size-xl) !important; }
.font-2xl { font-size: var(--font-size-2xl) !important; }

/* Font weights */
.font-normal { font-weight: var(--font-weight-normal) !important; }
.font-medium { font-weight: var(--font-weight-medium) !important; }
.font-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-bold { font-weight: var(--font-weight-bold) !important; }

/* Legacy compatibility aliases */
.font-11 { font-size: 11px !important; }
.font-12 { font-size: var(--font-size-xs) !important; }
.font-14 { font-size: var(--font-size-base) !important; }
.font-18 { font-size: var(--font-size-lg) !important; }
.font-500 { font-weight: var(--font-weight-medium) !important; }
.font-600 { font-weight: var(--font-weight-semibold) !important; }
.font-red { color: var(--color-danger) !important; }
.text-light { color: var(--color-text-secondary) !important; }
.text-dark { color: var(--color-text) !important; }
.text-blue { color: var(--color-primary) !important; }
.text-gray { color: var(--color-text-muted) !important; }

/* Radius utilities */
.radius-4 { border-radius: var(--radius-sm) !important; }
.radius-10 { border-radius: var(--radius-lg) !important; }
.radius-20 { border-radius: var(--radius-xl) !important; }
.rounded-16 { border-radius: var(--radius-xl) !important; }
.border-20 { border-radius: var(--radius-lg) !important; }

/* Height utilities */
.height-50 { height: 48px !important; }

/* Width utilities */
.width-50 { width: 50px; }
.width-100 { width: 100%; }
.w_50 { width: 140px; }