/* ============================================================
   CCMAR Design System — CSS Custom Properties
   Sleek control panel aesthetic with dark/light theme support
   ============================================================ */

/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

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

/* ============================================================
   DARK THEME (Default)
   Deep navy backgrounds, soft white text, blue-violet accents
   ============================================================ */
[data-theme="dark"] {
    /* Hint browsers (Chrome / Firefox / Edge) to render native form controls,
       scrollbars, and the <select> dropdown popup using the dark scheme.
       Without this, the <option> list pops up with the OS's light/dark
       chrome regardless of our CSS. Safari mostly ignores this for <option>,
       so the explicit option color rule in components.css is the backup. */
    color-scheme: dark;

    /* --- Backgrounds --- */
    --bg-primary:       hsl(222, 47%, 6%);
    --bg-secondary:     hsl(222, 41%, 9%);
    --bg-surface:       hsl(222, 41%, 11%);
    --bg-surface-hover: hsl(222, 41%, 14%);
    --bg-surface-active:hsl(222, 41%, 16%);
    --bg-elevated:      hsl(222, 41%, 13%);
    --bg-overlay:       hsla(222, 47%, 4%, 0.8);
    --bg-input:         hsl(222, 41%, 8%);
    --bg-sidebar:       hsl(222, 47%, 7%);
    --bg-header:        hsla(222, 47%, 7%, 0.85);

    /* --- Text --- */
    --text-primary:     hsl(210, 40%, 96%);
    --text-secondary:   hsl(215, 20%, 65%);
    --text-tertiary:    hsl(215, 15%, 45%);
    --text-disabled:    hsl(215, 15%, 35%);
    --text-inverse:     hsl(222, 47%, 6%);
    --text-on-accent:   hsl(0, 0%, 100%);

    /* --- Borders --- */
    --border-primary:   hsl(222, 30%, 18%);
    --border-secondary: hsl(222, 30%, 14%);
    --border-hover:     hsl(222, 30%, 25%);
    --border-focus:     hsl(238, 84%, 67%);
    --border-input:     hsl(222, 30%, 20%);

    /* --- Accent (Blue-Violet) --- */
    --accent:           hsl(238, 84%, 67%);
    --accent-hover:     hsl(238, 84%, 60%);
    --accent-muted:     hsla(238, 84%, 67%, 0.15);
    --accent-text:      hsl(238, 84%, 75%);
    --accent-glow:      hsla(238, 84%, 67%, 0.25);

    /* --- Status Colors --- */
    --success:          hsl(142, 71%, 45%);
    --success-muted:    hsla(142, 71%, 45%, 0.15);
    --success-text:     hsl(142, 71%, 60%);

    --warning:          hsl(38, 92%, 50%);
    --warning-muted:    hsla(38, 92%, 50%, 0.15);
    --warning-text:     hsl(38, 92%, 65%);

    --danger:           hsl(0, 84%, 60%);
    --danger-muted:     hsla(0, 84%, 60%, 0.15);
    --danger-text:      hsl(0, 84%, 70%);

    --info:             hsl(199, 89%, 48%);
    --info-muted:       hsla(199, 89%, 48%, 0.15);
    --info-text:        hsl(199, 89%, 65%);

    /* --- Shadows --- */
    --shadow-xs:        0 1px 2px hsla(0, 0%, 0%, 0.3);
    --shadow-sm:        0 2px 4px hsla(0, 0%, 0%, 0.3);
    --shadow-md:        0 4px 12px hsla(0, 0%, 0%, 0.4);
    --shadow-lg:        0 8px 24px hsla(0, 0%, 0%, 0.5);
    --shadow-xl:        0 16px 48px hsla(0, 0%, 0%, 0.6);

    /* --- Scrollbar --- */
    --scrollbar-track:  hsl(222, 41%, 9%);
    --scrollbar-thumb:  hsl(222, 30%, 25%);
    --scrollbar-hover:  hsl(222, 30%, 35%);

    /* --- Table --- */
    --table-row-alt:    hsla(222, 41%, 14%, 0.5);
    --table-row-hover:  hsla(238, 84%, 67%, 0.08);
    --table-header-bg:  hsl(222, 41%, 10%);
}


/* ============================================================
   LIGHT THEME
   Clean white surfaces, slate text, same accent palette
   ============================================================ */
[data-theme="light"] {
    /* Render native form controls (scrollbars, <select> popup, etc.) with the
       light scheme so they match the page even on a user whose OS is in dark
       mode. Paired with the dark-theme counterpart above. */
    color-scheme: light;

    /* --- Backgrounds --- */
    --bg-primary:       hsl(220, 14%, 96%);
    --bg-secondary:     hsl(0, 0%, 100%);
    --bg-surface:       hsl(0, 0%, 100%);
    --bg-surface-hover: hsl(220, 14%, 96%);
    --bg-surface-active:hsl(220, 14%, 93%);
    --bg-elevated:      hsl(0, 0%, 100%);
    --bg-overlay:       hsla(0, 0%, 0%, 0.4);
    --bg-input:         hsl(0, 0%, 100%);
    --bg-sidebar:       hsl(0, 0%, 100%);
    --bg-header:        hsla(0, 0%, 100%, 0.85);

    /* --- Text --- */
    --text-primary:     hsl(222, 47%, 11%);
    --text-secondary:   hsl(215, 16%, 47%);
    --text-tertiary:    hsl(215, 13%, 65%);
    --text-disabled:    hsl(215, 13%, 78%);
    --text-inverse:     hsl(0, 0%, 100%);
    --text-on-accent:   hsl(0, 0%, 100%);

    /* --- Borders --- */
    --border-primary:   hsl(220, 13%, 90%);
    --border-secondary: hsl(220, 13%, 93%);
    --border-hover:     hsl(220, 13%, 80%);
    --border-focus:     hsl(238, 84%, 67%);
    --border-input:     hsl(220, 13%, 87%);

    /* --- Accent (Blue-Violet) --- */
    --accent:           hsl(238, 84%, 60%);
    --accent-hover:     hsl(238, 84%, 53%);
    --accent-muted:     hsla(238, 84%, 60%, 0.1);
    --accent-text:      hsl(238, 84%, 55%);
    --accent-glow:      hsla(238, 84%, 60%, 0.2);

    /* --- Status Colors --- */
    --success:          hsl(142, 71%, 40%);
    --success-muted:    hsla(142, 71%, 40%, 0.1);
    --success-text:     hsl(142, 71%, 35%);

    --warning:          hsl(38, 92%, 45%);
    --warning-muted:    hsla(38, 92%, 45%, 0.1);
    --warning-text:     hsl(38, 92%, 38%);

    --danger:           hsl(0, 84%, 55%);
    --danger-muted:     hsla(0, 84%, 55%, 0.1);
    --danger-text:      hsl(0, 84%, 47%);

    --info:             hsl(199, 89%, 45%);
    --info-muted:       hsla(199, 89%, 45%, 0.1);
    --info-text:        hsl(199, 89%, 38%);

    /* --- Shadows --- */
    --shadow-xs:        0 1px 2px hsla(0, 0%, 0%, 0.04);
    --shadow-sm:        0 2px 4px hsla(0, 0%, 0%, 0.06);
    --shadow-md:        0 4px 12px hsla(0, 0%, 0%, 0.08);
    --shadow-lg:        0 8px 24px hsla(0, 0%, 0%, 0.12);
    --shadow-xl:        0 16px 48px hsla(0, 0%, 0%, 0.16);

    /* --- Scrollbar --- */
    --scrollbar-track:  hsl(220, 14%, 96%);
    --scrollbar-thumb:  hsl(220, 13%, 82%);
    --scrollbar-hover:  hsl(220, 13%, 70%);

    /* --- Table --- */
    --table-row-alt:    hsl(220, 14%, 97%);
    --table-row-hover:  hsla(238, 84%, 60%, 0.05);
    --table-header-bg:  hsl(220, 14%, 96%);
}


/* ============================================================
   SHARED TOKENS (theme-independent)
   ============================================================ */
:root {
    /* --- Typography --- */
    --font-sans:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono:        'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

    --text-xs:          0.8125rem;   /* 13px */
    --text-sm:          0.875rem;    /* 14px */
    --text-base:        0.9375rem;   /* 15px */
    --text-md:          1rem;        /* 16px */
    --text-lg:          1.125rem;    /* 18px */
    --text-xl:          1.125rem;    /* 18px */
    --text-2xl:         1.375rem;    /* 22px */
    --text-3xl:         1.75rem;     /* 28px */
    --text-4xl:         2.25rem;     /* 36px */

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

    --leading-tight:    1.25;
    --leading-normal:   1.5;
    --leading-relaxed:  1.75;

    --tracking-tight:   -0.01em;
    --tracking-normal:  0;
    --tracking-wide:    0.025em;

    /* --- 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-xs:        3px;
    --radius-sm:        4px;
    --radius-md:        6px;
    --radius-lg:        8px;
    --radius-xl:        12px;
    --radius-2xl:       16px;
    --radius-full:      9999px;

    /* --- Layout --- */
    --sidebar-width:    260px;
    --sidebar-collapsed:64px;
    --header-height:    56px;
    --content-max-width:1800px;

    /* --- Transitions --- */
    --duration-fast:    100ms;
    --duration-normal:  200ms;
    --duration-slow:    300ms;
    --ease-default:     cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in:          cubic-bezier(0.4, 0, 1, 1);
    --ease-out:         cubic-bezier(0, 0, 0.2, 1);
    --ease-bounce:      cubic-bezier(0.34, 1.56, 0.64, 1);

    /* --- Z-Index Scale --- */
    --z-dropdown:       100;
    --z-sticky:         200;
    --z-sidebar:        300;
    --z-header:         400;
    --z-overlay:        500;
    --z-modal:          600;
    --z-toast:          700;
    --z-tooltip:        800;
}


/* ============================================================
   BASE STYLES
   ============================================================ */
html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--weight-normal);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    overflow: hidden;
    height: 100vh;
}

a {
    color: var(--accent-text);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-default);
}
a:hover {
    color: var(--accent);
}

::selection {
    background-color: var(--accent-muted);
    color: var(--accent-text);
}

/* --- Custom Scrollbar --- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-hover);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* --- Focus Visible --- */
:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* --- Utility: visually hidden --- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}