/* ==========================================================================
   root.css — centralized design tokens for the whole site.

   Brand colors are taken from the iamatic.es landing page (magenta / gold /
   cyan on black). Every other stylesheet should read colors, fonts, spacing
   and radii from the variables defined here instead of hard-coding values,
   so the whole site (landing page + Django dashboard) stays in sync.

   Theme is selected via `data-bs-theme="dark"` / `data-bs-theme="light"` on <html>.
   ========================================================================== */

:root {
    /* Brand hues, theme-independent */
    --brand-magenta: #ff00ff;
    --brand-gold: #ffd700;
    --brand-cyan: #00ffff;

    /* Fonts */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: monospace, "Courier New", sans-serif;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;

    /* Radii */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 10px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-medium: 0.3s ease;
}

/* ---------------------------------------------------------------------- */
/* Dark theme — matches the landing page look                             */
/* ---------------------------------------------------------------------- */
[data-bs-theme="dark"] {
    --color-primary: var(--brand-magenta);
    --color-secondary: var(--brand-gold);
    --color-tertiary: var(--brand-cyan);

    --color-primary-75: rgba(255, 0, 255, 0.75);
    --color-primary-50: rgba(255, 0, 255, 0.5);
    --color-primary-25: rgba(255, 0, 255, 0.25);

    --color-secondary-75: rgba(255, 215, 0, 0.75);
    --color-secondary-50: rgba(255, 215, 0, 0.5);
    --color-secondary-25: rgba(255, 215, 0, 0.25);

    --color-tertiary-75: rgba(0, 255, 255, 0.75);
    --color-tertiary-50: rgba(0, 255, 255, 0.5);
    --color-tertiary-25: rgba(0, 255, 255, 0.25);

    --bg: #000000;
    --surface: #14141a;
    --surface-alt: rgba(69, 69, 69, 0.33);
    --text: #dddddd;
    --text-muted: #9a9a9a;
    --border: #383840;

    --header-bg: #000000;
    --header-text: #dddddd;
    --link: var(--color-tertiary);

    --success: #22c55e;
    --error: #f87171;
    --severity-info: #60a5fa;
    --severity-warning: #fbbf24;
    --severity-critical: #f87171;
}

/* ---------------------------------------------------------------------- */
/* Light theme — same brand hues, tuned for contrast on white              */
/* ---------------------------------------------------------------------- */
[data-bs-theme="light"] {
    --color-primary: #c400c4;
    --color-secondary: #a67c00;
    --color-tertiary: #0891b2;

    --color-primary-75: rgba(196, 0, 196, 0.75);
    --color-primary-50: rgba(196, 0, 196, 0.5);
    --color-primary-25: rgba(196, 0, 196, 0.15);

    --color-secondary-75: rgba(166, 124, 0, 0.75);
    --color-secondary-50: rgba(166, 124, 0, 0.5);
    --color-secondary-25: rgba(166, 124, 0, 0.15);

    --color-tertiary-75: rgba(8, 145, 178, 0.75);
    --color-tertiary-50: rgba(8, 145, 178, 0.5);
    --color-tertiary-25: rgba(8, 145, 178, 0.15);

    --bg: #f4f5f7;
    --surface: #ffffff;
    --surface-alt: #f9fafb;
    --text: #1a1a1a;
    --text-muted: #6b7280;
    --border: #e5e7eb;

    --header-bg: #1f2937;
    --header-text: #ffffff;
    --link: var(--color-tertiary);

    --success: #16a34a;
    --error: #dc2626;
    --severity-info: #2563eb;
    --severity-warning: #d97706;
    --severity-critical: #dc2626;
}

/* ---------------------------------------------------------------------- */
/* Shared minimalist scrollbar styling                                    */
/* ---------------------------------------------------------------------- */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--color-primary-25);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-50);
}

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

* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary-25) transparent;
}