/* === FILE CONTEXT === */
/* Owner: core/tokens */
/* Purpose: Global design tokens — :root custom properties only. Zero CSS selectors. */
/* === CONTEXT.TXT §20 === */

:root {
    /* 
       Functional HSL Tokens (BP Section 3.1)
       Logic: --color-hs: H, S; 
       Usage: hsla(var(--color-hs), L%, A)
    */

    /* Base Colors */
    --primary-hs: 234, 66%;    /* #1a237e -> hsl(234, 66%, 30%) */
    --brand-light-hs: 228, 77%; /* #667eea -> hsl(228, 77%, 66%) */
    --secondary-hs: 221, 83%;  /* #2563eb -> hsl(221, 83%, 53%) */
    --accent-hs: 45, 100%;     /* #ffca28 -> hsl(45, 100%, 58%) */
    --success-hs: 161, 84%;    /* #10b981 -> hsl(161, 84%, 39%) */
    --warning-hs: 48, 89%;     /* #f1c40f -> hsl(48, 89%, 50%) */
    --error-hs: 0, 84%;        /* #ef4444 -> hsl(0, 84%, 60%) */
    --dark-blue-hs: 224, 85%;  /* #2562ee -> hsl(224, 85%, 54%) */

    /* Neutral Tokens */
    --bg-hs: 210, 40%;         /* #f1f5f9 -> hsl(210, 40%, 96%) */
    --text-hs: 215, 25%;       /* #1e293b -> hsl(215, 25%, 17%) */

    /* Semantic Mappings */
    --color-primary: hsla(var(--primary-hs), 30%, 1);
    --color-secondary: hsla(var(--secondary-hs), 53%, 1);
    --color-accent: hsla(var(--accent-hs), 58%, 1);
    --color-success: hsla(var(--success-hs), 39%, 1);
    --color-warning: hsla(var(--warning-hs), 50%, 1);
    --color-error: hsla(var(--error-hs), 60%, 1);
    --color-black: hsla(0, 0%, 0%, 1);
    --color-bg: hsla(var(--bg-hs), 93%, 1);
    --color-text: hsla(var(--text-hs), 17%, 1);
    --color-text-muted: hsla(var(--text-hs), 47%, 1);
    --btn-outline-text: var(--color-primary);

    /* Legacy backward-compatible aliases (from deleted style.css/variables.css) */
    --text-primary: var(--color-text);
    --text-main: var(--color-text);
    --text-muted: var(--color-text-muted);
    --background-color: var(--color-bg);
    --bg-color: var(--color-bg);
    --success-color: var(--color-success);
    --danger-color: var(--color-error);
    --secondary-color: var(--color-secondary);
    --primary-color: var(--color-primary);
    --glass-border: hsla(var(--text-hs), 17%, 0.15);

    /* Sidebar tokens */
    --sidebar-text: hsla(215, 20%, 25%, 1);
    --sidebar-text-muted: hsla(215, 15%, 45%, 1);
    --sidebar-hover-bg: hsla(215, 20%, 90%, 1);
    --sidebar-border: hsla(215, 15%, 70%, 0.3);
    --sidebar-active-border: hsla(215, 85%, 45%, 1);
    --sidebar-bg: hsla(214, 26%, 84%, 1);

    /* Design Aliases */
    --card-bg: hsla(var(--bg-hs), 99%, 1);
    --color-input-bg: hsla(var(--text-hs), 17%, 0.04);
    --border-color: hsla(var(--text-hs), 17%, 0.1);
    --action-bar-border: var(--border-color);

    /* Elevated / hover surface tokens — light mode */
    --color-bg-elevated: hsla(var(--bg-hs), 96%, 1);   /* ~slate-100: table headers, elevated panels */
    --color-bg-hover: hsla(var(--bg-hs), 98%, 1);      /* ~slate-50: hover states */

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --font-heading: 'Outfit', 'Inter', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;

    /* Title size tokens — standard admin hierarchy */
    --page-title-size: 2rem;
    --page-title-weight: 700;
    --page-subtitle-size: 1rem;
    --section-title-size: 1.125rem;
    --section-title-weight: 700;
    --card-title-size: 1.125rem;
    --card-title-weight: 600;

    /* Spatial Rhythm (BP Section 3.2) - 8pt Grid */
    --s-1: 0.25rem;  /* 4px */
    --s-2: 0.5rem;   /* 8px */
    --s-3: 0.75rem;  /* 12px */
    --s-4: 1rem;     /* 16px */
    --s-6: 1.5rem;   /* 24px */
    --s-8: 2rem;     /* 32px */
    --s-12: 3rem;    /* 48px */
    --s-16: 4rem;    /* 64px */
    --s-24: 6rem;    /* 96px */

    /* Fluid Typography (BP Section 3.2) */
    /* Logic: clamp(min, preferred, max) - scales from 320px to 1280px viewport */
    --fs-xs: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);    /* 11px -> 12px */
    --fs-sm: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);     /* 12px -> 14px */
    --fs-base: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);    /* 14px -> 16px */
    --fs-md: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);       /* 16px -> 18px */
    --fs-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);    /* 18px -> 20px */
    --fs-xl: clamp(1.25rem, 1.125rem + 0.6vw, 1.5rem);      /* 20px -> 24px */
    --fs-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);    /* 24px -> 30px */
    --fs-3xl: clamp(1.75rem, 1.5rem + 1.25vw, 2.25rem);     /* 28px -> 36px */
    --fs-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.25rem);     /* 36px -> 52px */

    /* Layout */
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 80px;

    /* Viewport & Touch Target Tokens */
    --touch-target: 44px;
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
    --sar: env(safe-area-inset-right, 0px);
}

html[data-theme="dark"] {
    --card-bg: hsla(var(--bg-hs), 21%, 1);
    --border-color: hsla(var(--bg-hs), 27%, 1);
    --action-bar-border: hsla(var(--text-hs), 70%, 0.1);
    --library-border: hsla(var(--text-hs), 100%, 0.04);
    --color-bg: hsla(215, 18%, 18%, 1);
    --sidebar-bg: #242c3d;
    --color-input-bg: hsla(var(--text-hs), 5%, 0.1);
    /* Light text on dark backgrounds — was missing, causing invisible text */
    --color-text: hsla(var(--text-hs), 92%, 1);
    --color-text-muted: hsla(var(--text-hs), 70%, 1);
    /* Primary brand — brightened for dark-background readability */
    --color-primary: hsla(var(--primary-hs), 75%, 1);
    /* Legacy backward-compatible aliases — follow adaptive --color-text */
    --text-primary: var(--color-text);
    --text-main: var(--color-text);
    --text-muted: var(--color-text-muted);
    --background-color: var(--color-bg);
    --bg-color: var(--color-bg);
    --success-color: var(--color-success);
    --danger-color: var(--color-error);
    --secondary-color: var(--color-secondary);
    --primary-color: var(--color-primary);
    --glass-border: hsla(var(--bg-hs), 30%, 0.4);

    /* Elevated / hover surface tokens */
    --color-bg-elevated: hsla(var(--bg-hs), 22%, 1);   /* Table headers, elevated panels */
    --color-bg-hover: hsla(var(--bg-hs), 27%, 1);      /* Hover states, cell borders in dark */

    /* Sidebar tokens — light text on dark sidebar bg (#151a24) */
    --sidebar-text: hsla(215, 20%, 85%, 1);
    --sidebar-text-muted: hsla(215, 15%, 60%, 0.85);
    --sidebar-hover-bg: hsla(215, 20%, 22%, 1);
    --sidebar-border: hsla(215, 15%, 35%, 0.3);
    --sidebar-active-border: hsla(45, 96%, 53%, 1); /* Amber */
    --btn-outline-text: hsla(var(--brand-light-hs, 228 77%), 75%, 1);
}