/*
 * HuliOS Dashboard - Design Tokens
 * Premium dark theme inspired by GitHub, Vercel, and Linear.
 * All visual properties are defined here as CSS custom properties.
 */

:root {
    /* ------------------------------------------------------------------ */
    /* Color Palette - Dark Theme                                         */
    /* ------------------------------------------------------------------ */

    /* Backgrounds */
    --bg-primary:       #0d1117;
    --bg-secondary:     #161b22;
    --bg-tertiary:      #1c2128;
    --bg-input:         #0a0e14;
    --bg-hover:         #1c2128;
    --bg-active:        #21262d;
    --bg-overlay:       rgba(0, 0, 0, 0.6);

    /* Borders */
    --border:           #30363d;
    --border-light:     #21262d;
    --border-focus:     #58a6ff;

    /* Text */
    --text-primary:     #e6edf3;
    --text-secondary:   #8b949e;
    --text-muted:       #484f58;
    --text-link:        #58a6ff;

    /* Accent */
    --accent:           #58a6ff;
    --accent-hover:     #79c0ff;
    --accent-subtle:    rgba(88, 166, 255, 0.15);

    /* Semantic Colors */
    --success:          #3fb950;
    --success-hover:    #56d364;
    --success-bg:       rgba(63, 185, 80, 0.15);

    --warning:          #d29922;
    --warning-hover:    #e3b341;
    --warning-bg:       rgba(210, 153, 34, 0.15);

    --error:            #f85149;
    --error-hover:      #ff6e6a;
    --error-bg:         rgba(248, 81, 73, 0.15);

    --running:          #58a6ff;
    --running-bg:       rgba(88, 166, 255, 0.15);

    --purple:           #bc8cff;
    --purple-bg:        rgba(188, 140, 255, 0.15);

    /* Execute Button */
    --execute:          #238636;
    --execute-hover:    #2ea043;
    --execute-border:   #2ea043;
    --execute-glow:     rgba(46, 160, 67, 0.4);

    /* ------------------------------------------------------------------ */
    /* Typography                                                         */
    /* ------------------------------------------------------------------ */
    --font-ui:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:  'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    --text-xs:    0.75rem;      /* 12px */
    --text-sm:    0.8125rem;    /* 13px */
    --text-base:  0.875rem;     /* 14px */
    --text-md:    1rem;         /* 16px */
    --text-lg:    1.25rem;      /* 20px */
    --text-xl:    1.5rem;       /* 24px */
    --text-2xl:   2rem;         /* 32px */
    --text-3xl:   2.5rem;       /* 40px */

    --weight-regular:   400;
    --weight-medium:    500;
    --weight-semibold:  600;
    --weight-bold:      700;

    --line-height:       1.5;
    --line-height-tight: 1.25;
    --line-height-heading: 1.4;
    --letter-spacing-heading: -0.01em;

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

    /* ------------------------------------------------------------------ */
    /* Shadows                                                            */
    /* ------------------------------------------------------------------ */
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.6);
    --shadow-glow-blue:   0 0 20px rgba(88, 166, 255, 0.15);
    --shadow-glow-green:  0 0 20px rgba(63, 185, 80, 0.15);
    --shadow-glow-red:    0 0 20px rgba(248, 81, 73, 0.15);

    /* ------------------------------------------------------------------ */
    /* Transitions                                                        */
    /* ------------------------------------------------------------------ */
    --transition-fast:   150ms ease;
    --transition-normal: 200ms ease;
    --transition-slow:   400ms ease;

    /* ------------------------------------------------------------------ */
    /* Layout                                                             */
    /* ------------------------------------------------------------------ */
    --header-height:      56px;
    --footer-height:      40px;
    --content-max-width:  1400px;
    --content-padding:    24px;
    --sidebar-width:      380px;
}