/* ===================================================================
 * variables.css — Management-Common Design System
 * HSL color tokens (shadcn convention), global reset, theme switching.
 * Shared across: control-service, tlog-service, game-ops-service.
 *
 * v2.0 — Tabler-inspired visual upgrade (2026-03-06)
 * =================================================================== */

/* ===== Light Theme (default) ===== */
:root {
    --background: 0 0% 100%;
    --background-soft: 210 33% 98%;
    --background-muted: 210 36% 96%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --surface: 0 0% 100%;
    --surface-subtle: 210 40% 98%;
    --primary: 221 83% 53%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221 83% 53%;
    --success: 142 72% 40%;
    --success-foreground: 0 0% 100%;
    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 100%;
    --info: 199 89% 48%;
    --info-foreground: 210 40% 98%;

    /* Radii */
    --radius: 0.5rem;
    --radius-card: 0.75rem;
    --radius-btn: 0.5rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    --radius-full: 9999px;

    /* Typography */
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-md: 14px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    --font-size-metric: 28px;

    /* Spacing */
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* Shell Layout */
    --sidebar-width: 292px;
    --sidebar-width-icon: 64px;
    --header-height: 72px;
    --content-max-width: 1720px;
    --shell-gutter: 32px;

    /* Shadows — Tabler-inspired layered */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.04);
    --shadow-card: 0 0 0 1px rgb(0 0 0 / 0.04), 0 1px 3px rgb(0 0 0 / 0.06);
    --shadow-card-hover: 0 0 0 1px rgb(0 0 0 / 0.04), 0 8px 24px rgb(0 0 0 / 0.1);
    --shadow-btn: 0 1px 2px rgb(0 0 0 / 0.08), inset 0 1px 0 rgb(255 255 255 / 0.1);
    --shadow-input-focus: 0 0 0 3px hsl(var(--ring) / 0.15);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
}

/* ===== Dark Theme ===== */
[data-theme="dark"] {
    --background: 222.2 84% 4.9%;
    --background-soft: 222 47% 8%;
    --background-muted: 222 38% 11%;
    --foreground: 210 40% 98%;
    --card: 224 71% 8%;
    --card-foreground: 210 40% 98%;
    --surface: 224 71% 8%;
    --surface-subtle: 222 38% 11%;
    --primary: 217 91% 60%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 217 91% 60%;
    --success: 142 72% 50%;
    --warning: 38 92% 60%;
    --info: 199 89% 62%;

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.3);
    --shadow-card: 0 0 0 1px rgb(255 255 255 / 0.05), 0 1px 3px rgb(0 0 0 / 0.3);
    --shadow-card-hover: 0 0 0 1px rgb(255 255 255 / 0.05), 0 8px 24px rgb(0 0 0 / 0.4);
    --shadow-btn: 0 1px 2px rgb(0 0 0 / 0.3), inset 0 1px 0 rgb(255 255 255 / 0.05);
    --shadow-input-focus: 0 0 0 3px hsl(var(--ring) / 0.25);
}

/* ===== Global Reset ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    background:
        radial-gradient(960px 420px at 0% 0%, hsl(var(--primary) / 0.08), transparent 58%),
        radial-gradient(900px 440px at 100% 0%, hsl(var(--info) / 0.08), transparent 52%),
        linear-gradient(180deg, hsl(var(--background)) 0%, hsl(var(--background-soft)) 100%);
    min-height: 100vh;
    color: hsl(var(--foreground));
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[data-theme="dark"] body {
    background:
        radial-gradient(960px 420px at 0% 0%, hsl(var(--primary) / 0.16), transparent 58%),
        radial-gradient(900px 440px at 100% 0%, hsl(var(--info) / 0.12), transparent 52%),
        linear-gradient(180deg, hsl(var(--background)) 0%, hsl(var(--background-soft)) 100%);
}