/**
 * Design Tokens - Enterprise Professional Palette
 *
 * This file establishes the foundational design system for the recruitment platform.
 * Load order: 0 (before all other CSS files)
 *
 * @version 1.0.0
 * @date 2026-02-08
 */

:root {
    /* ============================================
       PRIMARY PALETTE - Enterprise Professional
       ============================================ */

    /* Primary Blue - Atlassian-inspired corporate blue */
    --color-primary: #0052CC;
    --color-primary-hover: #0747A6;
    --color-primary-active: #003D99;
    --color-primary-light: #DEEBFF;
    --color-primary-dark: #002B73;

    /* Secondary - Neutral slate for UI chrome */
    --color-secondary: #5E6C84;
    --color-secondary-hover: #42526E;
    --color-secondary-light: #EBECF0;

    /* ============================================
       SEMANTIC COLORS - Muted for enterprise
       ============================================ */

    /* Success - Muted green (not Bootstrap's bright green) */
    --color-success: #36B37E;
    --color-success-hover: #2E9E6C;
    --color-success-light: #E3FCEF;
    --color-success-text: #006644;

    /* Danger - Softer red */
    --color-danger: #DE350B;
    --color-danger-hover: #BF2600;
    --color-danger-light: #FFEBE6;
    --color-danger-text: #AE2A00;

    /* Warning - Amber (not bright yellow) */
    --color-warning: #FFAB00;
    --color-warning-hover: #FF991F;
    --color-warning-light: #FFFAE6;
    --color-warning-text: #172B4D;

    /* Info - Teal/Cyan */
    --color-info: #00B8D9;
    --color-info-hover: #00A3BF;
    --color-info-light: #E6FCFF;
    --color-info-text: #0052CC;

    /* ============================================
       TEXT HIERARCHY - High contrast, soft black
       ============================================ */
    --text-primary: #172B4D;          /* Headings, emphasis - NOT pure black */
    --text-secondary: #5E6C84;        /* Body text, descriptions */
    --text-tertiary: #7A869A;         /* Captions, hints, placeholders */
    --text-disabled: #A5ADBA;         /* Disabled states */
    --text-inverse: #FFFFFF;          /* On dark backgrounds */
    --text-link: #0052CC;             /* Links */
    --text-link-hover: #0747A6;       /* Link hover */

    /* ============================================
       BACKGROUND HIERARCHY
       ============================================ */
    --bg-page: #F4F5F7;               /* Page background */
    --bg-card: #FFFFFF;               /* Card background */
    --bg-subtle: #FAFBFC;             /* Subtle contrast, table headers */
    --bg-hover: #EBECF0;              /* Hover states */
    --bg-active: #DEEBFF;             /* Active/selected states */
    --bg-sidebar: #172B4D;            /* Dark sidebar background */

    /* ============================================
       BORDERS
       ============================================ */
    --border-subtle: #DFE1E6;         /* Subtle dividers, card borders */
    --border-standard: #C1C7D0;       /* Standard borders, inputs */
    --border-emphasis: #A5ADBA;       /* Emphasis borders */
    --border-focus: #0052CC;          /* Focus ring color */

    /* ============================================
       SHADOWS - Subtle, professional
       ============================================ */
    --shadow-xs: 0 1px 2px rgba(9, 30, 66, 0.08);
    --shadow-sm: 0 1px 3px rgba(9, 30, 66, 0.12);
    --shadow-md: 0 3px 6px rgba(9, 30, 66, 0.15);
    --shadow-lg: 0 8px 16px rgba(9, 30, 66, 0.18);
    --shadow-xl: 0 12px 24px rgba(9, 30, 66, 0.22);
    --shadow-card: 0 1px 1px rgba(9, 30, 66, 0.08), 0 0 1px rgba(9, 30, 66, 0.12);
    --shadow-card-hover: 0 4px 8px -2px rgba(9, 30, 66, 0.15), 0 0 1px rgba(9, 30, 66, 0.12);
    --shadow-dropdown: 0 4px 8px -2px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31);

    /* ============================================
       TYPOGRAPHY - System fonts (fast, professional)
       ============================================ */
    --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-mono: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;

    /* Size scale (based on 14px base) */
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-md: 16px;
    --font-size-lg: 20px;
    --font-size-xl: 24px;
    --font-size-2xl: 29px;
    --font-size-3xl: 35px;

    /* Line heights */
    --line-height-tight: 1.25;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.75;

    /* Font weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Letter spacing */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.05em;

    /* ============================================
       SPACING SCALE (8px grid)
       ============================================ */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* Component-specific spacing */
    --card-padding: 20px;
    --card-padding-compact: 16px;
    --section-gap: 24px;
    --form-gap: 16px;
    --button-padding-x: 16px;
    --button-padding-y: 8px;

    /* ============================================
       BORDER RADIUS
       ============================================ */
    --radius-none: 0;
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 9999px;

    /* ============================================
       TRANSITIONS
       ============================================ */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 200ms ease-in-out;
    --transition-slow: 300ms ease-in-out;
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.0, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);

    /* ============================================
       Z-INDEX SCALE
       ============================================ */
    --z-base: 0;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /* ============================================
       COMPONENT-SPECIFIC TOKENS
       ============================================ */

    /* Buttons */
    --btn-primary-bg: var(--color-primary);
    --btn-primary-hover-bg: var(--color-primary-hover);
    --btn-primary-text: var(--text-inverse);

    --btn-success-bg: var(--color-success);
    --btn-success-hover-bg: var(--color-success-hover);
    --btn-success-text: var(--text-inverse);

    --btn-danger-bg: var(--color-danger);
    --btn-danger-hover-bg: var(--color-danger-hover);
    --btn-danger-text: var(--text-inverse);

    --btn-warning-bg: var(--color-warning);
    --btn-warning-hover-bg: var(--color-warning-hover);
    --btn-warning-text: var(--text-primary);

    /* Cards */
    --card-bg: var(--bg-card);
    --card-border: var(--border-subtle);
    --card-header-bg: var(--bg-subtle);
    --card-shadow: var(--shadow-card);
    --card-shadow-hover: var(--shadow-card-hover);
    --card-radius: var(--radius-md);

    /* Forms */
    --input-border: var(--border-standard);
    --input-focus-border: var(--color-primary);
    --input-focus-ring: 0 0 0 3px var(--color-primary-light);
    --input-bg: var(--bg-card);
    --input-disabled-bg: var(--bg-subtle);

    /* Tables */
    --table-header-bg: var(--bg-subtle);
    --table-border: var(--border-subtle);
    --table-hover-bg: var(--bg-hover);
    --table-stripe-bg: var(--bg-subtle);

    /* Badges - Light backgrounds with dark text (professional) */
    --badge-primary-bg: var(--color-primary-light);
    --badge-primary-text: var(--color-primary);

    --badge-success-bg: var(--color-success-light);
    --badge-success-text: var(--color-success-text);

    --badge-danger-bg: var(--color-danger-light);
    --badge-danger-text: var(--color-danger-text);

    --badge-warning-bg: var(--color-warning-light);
    --badge-warning-text: var(--text-primary);

    --badge-info-bg: var(--color-info-light);
    --badge-info-text: var(--color-info-text);

    --badge-secondary-bg: var(--bg-hover);
    --badge-secondary-text: var(--text-secondary);
}

/* ============================================
   GLOBAL RESETS & BASE STYLES
   ============================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--text-primary);
    background-color: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Links */
a {
    color: var(--text-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--text-link-hover);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    margin-top: 0;
}

h1 { font-size: var(--font-size-2xl); }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); }
h4 { font-size: var(--font-size-md); }
h5, h6 { font-size: var(--font-size-base); }

/* Focus states - accessibility */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}