@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

@property --narrow-sentinel {
    syntax: "<length-percentage>";
    inherits: true;
    initial-value: 100vi;
}


@layer reset, base, components, utilities, theme, overrides;

/* ============================================
   PROFESSIONAL HR/RECRUITMENT THEME
   Clean, trustworthy, empowering recruiters
   ============================================ */
@layer theme {
    :root {
        /* Typography - Professional & readable */
        --font-primary: 'Plus Jakarta Sans', system-ui, sans-serif;

        /* Rounded corners - Modern but professional */
        --wire-radius: 0.5rem;

        /* Font sizes - Refined scale */
        --fs-xxl: 2.25rem;
        --fs-xl: 1.5rem;
        --fs-large: 1.125rem;

        /* Button text */
        --button-text-color: oklch(100% 0 0);
    }

    /* ============================================
       DARK THEME (default)
       ============================================ */
    :root,
    [data-theme="dark"] {
        /* Background - Clean slate gray */
        --bg-primary: oklch(15% 0.01 250);
        --bg-secondary: oklch(20% 0.015 250);

        /* Text - High contrast, readable */
        --text-primary: oklch(95% 0.005 250);
        --text-secondary: oklch(65% 0.01 250);

        /* Primary accent - Professional indigo/violet */
        --accent-primary: oklch(65% 0.15 270);
        --accent-secondary: oklch(55% 0.12 275);
        --accent-glow: oklch(65% 0.15 270 / 0.2);

        /* Secondary accent - Warm coral for CTAs */
        --accent-warm: oklch(70% 0.18 25);
        --accent-warm-hover: oklch(65% 0.16 25);

        /* Success/Status colors */
        --color-success: oklch(70% 0.15 145);
        --color-warning: oklch(75% 0.15 85);
        --color-info: oklch(65% 0.12 230);

        /* Borders - Subtle but defined */
        --border-color: oklch(30% 0.01 250);
        --wire-border: 1px solid oklch(28% 0.015 250);

        /* Surfaces - Layered depth */
        --surface-elevated: oklch(22% 0.015 250);
        --surface-base: oklch(18% 0.01 250);
        --surface-sunken: oklch(12% 0.008 250);

        /* Input styling */
        --input-bg: oklch(18% 0.01 250);
        --input-border-color: oklch(32% 0.015 250);
        --input-focus-shadow: oklch(65% 0.15 270 / 0.25);

        /* Shadows - Subtle depth */
        --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.1);
        --shadow-md: 0 4px 12px oklch(0% 0 0 / 0.15);
        --shadow-lg: 0 8px 24px oklch(0% 0 0 / 0.2);
    }

    /* Clean background */
    html {
        background: var(--bg-primary);
        min-block-size: 100dvb;
    }

    body {
        font-family: var(--font-primary);
        line-height: 1.6;
    }

    /* Links - Professional indigo */
    a {
        color: var(--accent-primary);
        transition: color var(--time-fast) var(--ease-out);

        &:hover {
            color: oklch(75% 0.15 270);
        }
    }

    /* Smooth transitions */
    *, *::before, *::after {
        transition-property: background-color, border-color, box-shadow, color;
        transition-duration: 0.15s;
        transition-timing-function: ease-out;
    }

    /* Primary buttons - Warm coral CTA */
    .primary-button,
    .submit-button,
    .cta-button.primary {
        background: var(--accent-warm);
        border: none;
        box-shadow: var(--shadow-sm);
        color: var(--button-text-color);
        font-weight: var(--fw-semibold);
        padding: var(--space-sm) var(--space-xl);

        &:hover {
            background: var(--accent-warm-hover);
            box-shadow: var(--shadow-md);
            transform: translateY(-1px);
        }
    }

    /* Secondary buttons - Outlined indigo */
    .secondary-button,
    .cta-button:not(.primary) {
        background: transparent;
        border: 1px solid var(--accent-primary);
        color: var(--accent-primary);
        font-weight: var(--fw-medium);

        &:hover {
            background: oklch(65% 0.15 270 / 0.1);
            border-color: oklch(75% 0.15 270);
        }
    }

    /* Cards - Clean elevated surfaces */
    .card {
        background: var(--surface-elevated);
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow-sm);
        border-radius: var(--wire-radius);
    }

    /* Inputs - Clean with focus ring */
    input, textarea, select {
        background: var(--input-bg);
        border: 1px solid var(--input-border-color);
        color: var(--text-primary);
        border-radius: var(--wire-radius);

        &::placeholder {
            color: var(--text-secondary);
        }

        &:focus {
            outline: none;
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 3px var(--input-focus-shadow);
        }
    }

    /* Tags/badges - Subtle colored pills */
    .tag {
        background: oklch(65% 0.15 270 / 0.15);
        border: 1px solid oklch(65% 0.15 270 / 0.3);
        color: oklch(75% 0.12 270);
        font-size: var(--fs-xsmall);
        font-weight: var(--fw-medium);
    }

    .status-badge {
        font-size: var(--fs-xsmall);
        font-weight: var(--fw-semibold);
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .chip {
        background: var(--surface-base);
        border: 1px solid var(--border-color);
        color: var(--text-primary);

        &:hover {
            background: var(--surface-elevated);
            border-color: var(--accent-primary);
        }
    }

    /* Progress bars - Gradient */
    .progress {
        background: linear-gradient(90deg, var(--accent-primary), var(--accent-warm));
        border-radius: 2px;
    }

    /* Table rows - Subtle hover */
    tbody tr:hover {
        background: var(--surface-elevated);
    }

    /* Headers - Clean, no gradient */
    h1 {
        color: var(--text-primary);
        font-weight: var(--fw-bold);
        letter-spacing: -0.02em;
        line-height: 1.2;
    }

    h2, h3 {
        color: var(--text-primary);
        font-weight: var(--fw-semibold);
    }

    /* Sidebar toggle */
    .sidebar-toggle-btn {
        background: var(--surface-elevated);
        border: 1px solid var(--border-color);

        &:hover {
            background: oklch(28% 0.02 250);
            border-color: var(--accent-primary);
        }
    }

    /* View tabs - Clean pill style */
    .view-tab.active,
    .tab.active {
        background: var(--accent-primary);
        color: var(--button-text-color);
        font-weight: var(--fw-medium);
    }

    .view-tab,
    .tab {
        color: var(--text-secondary);

        &:not(.active):hover {
            background: var(--surface-elevated);
            color: var(--text-primary);
        }
    }

    /* Page header - Clean border */
    .page-header {
        padding-block-end: var(--space-lg);
        margin-block-end: var(--space-xl);
        border-block-end: 1px solid var(--border-color);

        &::after {
            display: none;
        }
    }

    /* Feature icons - Indigo tinted */
    .feature-icon,
    .section-icon,
    .page-icon,
    .step-number,
    .chapter-number {
        background: oklch(65% 0.15 270 / 0.15);
        border: 1px solid oklch(65% 0.15 270 / 0.3);
        color: var(--accent-primary);
    }

    /* Stats styling */
    .stat-value {
        color: var(--accent-warm) !important;
        font-weight: var(--fw-bold);
    }

    /* Nav - Clean header */
    nav {
        background: var(--surface-sunken);
        border-block-end: 1px solid var(--border-color);
    }

    /* Signin card */
    .signin-card {
        background: var(--surface-elevated);
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow-lg);
    }

    /* Table styling */
    .positions-table {
        th {
            color: var(--text-secondary);
            font-weight: var(--fw-semibold);
            text-transform: uppercase;
            letter-spacing: 0.04em;
            font-size: var(--fs-xsmall);
            background: var(--surface-base);
        }

        td {
            border-color: var(--border-color);
        }
    }

    /* Labels */
    .label {
        color: var(--text-secondary);
        font-weight: var(--fw-medium);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    /* Chat sidebar - AI assistant feel */
    .chat-card {
        background: linear-gradient(135deg, oklch(65% 0.15 270 / 0.08), oklch(55% 0.12 275 / 0.05));
        border: 1px solid oklch(65% 0.15 270 / 0.2);
    }

    .chat-input {
        background: var(--surface-base);
        border: 1px solid var(--border-color);

        &:focus-within {
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 3px var(--input-focus-shadow);
        }

        .send-button {
            background: var(--accent-primary);
            color: var(--button-text-color);
            border: none;

            &:hover {
                background: oklch(60% 0.14 270);
            }
        }
    }

    /* ============================================
       LIGHT THEME
       Clean, professional, high contrast
       ============================================ */
    html[data-theme="light"] {
        /* Background - Clean white/gray */
        --bg-primary: oklch(98% 0.005 250);
        --bg-secondary: oklch(95% 0.008 250);

        /* Text - High contrast dark */
        --text-primary: oklch(20% 0.01 250);
        --text-secondary: oklch(45% 0.01 250);

        /* Primary accent - Deeper indigo for light bg */
        --accent-primary: oklch(50% 0.18 270);
        --accent-secondary: oklch(45% 0.15 275);
        --accent-glow: oklch(50% 0.18 270 / 0.15);

        /* Secondary accent - Deeper coral for CTAs */
        --accent-warm: oklch(60% 0.2 25);
        --accent-warm-hover: oklch(55% 0.18 25);

        /* Borders - Subtle but visible */
        --border-color: oklch(85% 0.005 250);
        --wire-border: 1px solid oklch(82% 0.008 250);

        /* Surfaces - Layered depth */
        --surface-elevated: oklch(100% 0 0);
        --surface-base: oklch(96% 0.005 250);
        --surface-sunken: oklch(92% 0.008 250);

        /* Input styling */
        --input-bg: oklch(100% 0 0);
        --input-border-color: oklch(80% 0.008 250);
        --input-focus-shadow: oklch(50% 0.18 270 / 0.2);

        /* Shadows - Visible but subtle */
        --shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.08);
        --shadow-md: 0 4px 12px oklch(0% 0 0 / 0.1);
        --shadow-lg: 0 8px 24px oklch(0% 0 0 / 0.12);

        /* Button text - stays white on colored buttons */
        --button-text-color: oklch(100% 0 0);

        /* Status colors - adjusted for light bg */
        --color-success: oklch(55% 0.18 145);
        --color-warning: oklch(60% 0.18 85);
        --color-info: oklch(50% 0.15 230);
    }

    /* Light theme specific overrides */
    html[data-theme="light"] a:hover {
        color: oklch(60% 0.18 270);
    }

    html[data-theme="light"] .sidebar-toggle-btn:hover {
        background: oklch(88% 0.01 250);
    }

    html[data-theme="light"] .chat-card {
        background: linear-gradient(135deg, oklch(50% 0.18 270 / 0.06), oklch(45% 0.15 275 / 0.04));
        border: 1px solid oklch(50% 0.18 270 / 0.15);
    }

    html[data-theme="light"] .chat-input .send-button:hover {
        background: oklch(45% 0.16 270);
    }

    /* Theme toggle component */
    .theme-toggle {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs);
    }

    .theme-toggle-checkbox {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .theme-toggle-label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-3xs) var(--space-3xs);
        width: 3.5rem;
        height: 1.75rem;
        background: var(--surface-base);
        border: 1px solid var(--border-color);
        border-radius: 1rem;
        cursor: pointer;
        transition: all 0.2s ease-out;
    }

    .theme-toggle-label:hover {
        border-color: var(--accent-primary);
    }

    .theme-toggle-slider {
        position: absolute;
        top: 50%;
        left: var(--space-3xs);
        transform: translateY(-50%);
        width: 1.25rem;
        height: 1.25rem;
        background: var(--accent-primary);
        border-radius: 50%;
        transition: all 0.2s ease-out;
        box-shadow: var(--shadow-sm);
    }

    .theme-toggle-checkbox:checked + .theme-toggle-label .theme-toggle-slider {
        left: calc(100% - 1.25rem - var(--space-3xs));
    }

    .theme-toggle-icon {
        font-size: var(--fs-small);
        z-index: 1;
    }

    .theme-toggle-icon--sun {
        color: oklch(75% 0.15 85);
    }

    .theme-toggle-icon--moon {
        color: oklch(70% 0.1 270);
    }
}



@layer reset {

    /* Modern CSS Reset */
    *,
    *::before,
    *::after {
        /* box-sizing: border-box; */
        margin: 0;
        padding: 0;
    }

    html {
        -moz-text-size-adjust: none;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
        container-type: size;
        container-name: root;
        block-size: 100vb;
    }

    body {
        margin: 0;
        line-height: 1.5;
        text-rendering: optimizeSpeed;
        min-block-size: 100cqb;
    }

    img,
    picture,
    svg {
        display: block;
        max-inline-size: 100%;
    }

    input,
    button,
    textarea,
    select {
        font: inherit;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        overflow-wrap: break-word;
        margin: 0;
    }

    a {
        text-decoration: none;
    }

    ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    /* Remove animations for people who've turned them off */
    @media (prefers-reduced-motion: reduce) {

        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
}

@layer base {

    :root {
        --breakpoint: 600px;
        --measure-narrow: 35ch;
        --measure: 60ch;
        --measure-wide: 90ch;
        --full: stretch;
        /* Font Families */
        --font-primary: 'Inter', sans-serif;
        --font-mono: 'Roboto Mono', monospace;
        --font-title: 'Fredoka', sans-serif;

        /* Font Sizes */
        --fs-xxl: 2.5rem;
        --fs-xl: 1.8rem;
        --fs-large: 1.15rem;
        --fs-medium: 1.05rem;
        --fs-body: 1rem;
        --fs-small: 0.95rem;
        --fs-xsmall: 0.9rem;
        --fs-xxsmall: 0.85rem;
        --fs-tiny: 0.8rem;
        /* Font Weights */
        --fw-regular: 400;
        --fw-medium: 500;
        --fw-semibold: 600;
        --fw-bold: 700;
        --fw-extrabold: 800;

        /* Timing Values */
        --time-fast: 0.2s;
        --time-medium: 0.3s;
        --time-slow: 0.4s;
        --time-slower: 0.5s;
        --time-slowest: 0.6s;
        --time-animation: 1.3s;

        /* Animation Timing Functions */
        --ease-standard: ease;
        --ease-out: ease-out;
        --ease-in-out: ease-in-out;
        --ease-bounce: cubic-bezier(0.23, 1, 0.32, 1);

        /* Accent Color Definitions */
        --orange-primary: oklch(69.8% 0.19 51.4);
        --orange-secondary: oklch(64.5% 0.173 50.5);
        --orange-glow: oklch(69.8% 0.19 51.4 / 0.2);
        --orange-input-focus-shadow: oklch(69.8% 0.19 51.4 / 0.35);
        --blue-primary: oklch(78.7% 0.173 235.3);
        --blue-secondary: oklch(69.4% 0.146 238.6);
        --blue-glow: oklch(78.7% 0.173 235.3 / 0.15);
        --blue-input-focus-shadow: oklch(78.7% 0.173 235.3 / 0.25);

        --orange-glow-intense: oklch(69.8% 0.19 51.4 / 0.3);
        /* New more intense orange glow */
        --blue-glow-intense: oklch(78.7% 0.173 235.3 / 0.25);
        /* New more intense blue glow */

        /* Aura Shadow Color Definitions - STATIC */
        --aura-orange-1: oklch(69.8% 0.19 51.4 / 0.1);
        --aura-orange-2: oklch(66.5% 0.202 39.8 / 0.07);
        --aura-blue-1: oklch(78.7% 0.173 235.3 / 0.08);
        --aura-blue-2: oklch(72.2% 0.192 247.8 / 0.06);

        /* Dark Mode (Default) */
        --bg-primary: oklch(5.9% 0.004 261.8);
        --bg-secondary: oklch(15.4% 0.009 260.5);
        --text-primary: oklch(90.2% 0.004 264.4);
        --text-secondary: oklch(65.7% 0.007 264.7);
        --border-color: oklch(27.7% 0.009 258.2);
        --input-border-color: oklch(29.8% 0.009 257.1);
        --button-text-color: oklch(100% 0 0);
        --shadow-color: oklch(0% 0 0 / 0.65);
        --input-bg: oklch(12.8% 0.009 262.1);
        --input-bg-darker: oklch(9.8% 0.008 263.9);
        --copy-button-bg: oklch(14.6% 0.006 261.6);
        --copy-button-text: var(--text-secondary);
        --copy-button-hover-text: oklch(100% 0 0);
        --corner-accent-size: 0.5rem;
        /* 8px */

        --accent-primary: var(--orange-primary);
        --accent-secondary: var(--orange-secondary);
        --accent-glow: var(--orange-glow);
        --accent-glow-intense: var(--orange-glow-intense);
        /* New for more intense hover */
        --input-focus-shadow: var(--orange-input-focus-shadow);
        --copy-button-hover-bg: var(--orange-secondary);

        --current-aura-1: var(--aura-orange-1);
        --current-aura-2: var(--aura-orange-2);

        --wire-gap: 0.75rem;
        --wire-border: 1px solid gray;
        --wire-radius: 0.25rem;

        /* Surface colors (depth/elevation) */
        --surface-elevated: oklch(15% 0.02 260 / 0.9);
        --surface-base: oklch(10% 0.015 260 / 0.95);
        --surface-sunken: oklch(8% 0.01 260 / 0.9);
        --surface-deep: oklch(12% 0.015 260 / 0.6);

        /* Border variants */
        --border-subtle: oklch(40% 0.05 260 / 0.3);
        --border-muted: oklch(30% 0.03 260 / 0.5);
        --border-faint: oklch(25% 0.02 260 / 0.5);
        --border-section: oklch(35% 0.04 260 / 0.3);

        /* Spacing scale (based on --wire-gap) */
        --space-4xs: calc(var(--wire-gap) * 0.12);
        --space-3xs: calc(var(--wire-gap) * 0.33);
        --space-2xs: calc(var(--wire-gap) * 0.25);
        --space-xs: calc(var(--wire-gap) * 0.5);
        --space-sm: calc(var(--wire-gap) * 0.67);
        --space-compact: calc(var(--wire-gap) * 0.83);
        --space-md: calc(var(--wire-gap) * 1.17);
        --space-base: calc(var(--wire-gap) * 1.33);
        --space-lg: calc(var(--wire-gap) * 1.67);
        --space-xl: calc(var(--wire-gap) * 2);
        --space-2xl: calc(var(--wire-gap) * 2.67);
        --space-3xl: calc(var(--wire-gap) * 3.33);

        /* Glow/shadow sizes (based on --wire-gap) */
        --glow-spread-sm: calc(var(--wire-gap) * 1.25);
        --glow-spread-md: calc(var(--wire-gap) * 2.5);
        --glow-spread-lg: calc(var(--wire-gap) * 5);

        /* Highlight/white overlay */
        --highlight-subtle: oklch(100% 0 0 / 0.05);
        --highlight-soft: oklch(100% 0 0 / 0.2);
        --color-white: oklch(100% 0 0);
    }

    html {
        background-color: var(--bg-primary);
        color: var(--text-primary);
    }

    a {
        color: var(--text-primary);
    }

    /* Light theme base layer overrides */
    html[data-theme="light"] {
        --bg-primary: oklch(98% 0.005 250);
        --bg-secondary: oklch(95% 0.008 250);
        --text-primary: oklch(20% 0.01 250);
        --text-secondary: oklch(45% 0.01 250);
        --border-color: oklch(85% 0.005 250);
        --input-border-color: oklch(80% 0.008 250);
        --input-bg: oklch(100% 0 0);
        --input-bg-darker: oklch(96% 0.005 250);
        --shadow-color: oklch(0% 0 0 / 0.12);

        /* Surface colors for light */
        --surface-elevated: oklch(100% 0 0);
        --surface-base: oklch(96% 0.005 250);
        --surface-sunken: oklch(92% 0.008 250);
        --surface-deep: oklch(94% 0.005 250);

        /* Border variants for light */
        --border-subtle: oklch(75% 0.02 260 / 0.3);
        --border-muted: oklch(80% 0.015 260 / 0.4);
        --border-faint: oklch(85% 0.01 260 / 0.4);
        --border-section: oklch(78% 0.015 260 / 0.3);

        /* Highlight for light */
        --highlight-subtle: oklch(0% 0 0 / 0.03);
        --highlight-soft: oklch(0% 0 0 / 0.08);
    }
}