/**************************************
SAFEVISION INSTALL - THEME.CSS
White-label / kundanpassning
**************************************/

:root {

    /**************************************
    App / varumärke
    **************************************/

    --app-name: "SafeVision Install";

    /**************************************
    Färger
    **************************************/

    --color-primary: #0b4f7d;
    --color-primary-dark: #083b5e;
    --color-primary-light: #e8f4fd;

    --color-background: #f4f7fb;
    --color-card: #ffffff;

    --color-text: #102a43;
    --color-muted: #52667a;

    --color-border: #d7e5f1;
    --color-border-light: #e5eaf0;

    --color-hover-bg: #f5faff;
    --color-soft-bg: #f8fbff;

    /**************************************
    Statusfärger
    **************************************/

    --color-success: #166534;
    --color-success-bg: #e8f7ee;

    --color-danger: #b00020;
    --color-danger-bg: #ffe8e8;

    --color-warning: #7c4a03;
    --color-warning-bg: #fff7e6;

    --color-info: #0b4f7d;
    --color-info-bg: #e8f4fd;

    /**************************************
    Typografi
    **************************************/

    --font-family: Arial, Helvetica, sans-serif;

    --font-size-base: 15px;
    --font-size-small: 13px;
    --font-size-large: 18px;

    /**************************************
    Layout
    **************************************/

    --container-max-width: 1350px;
    --container-padding: 35px;
    --container-padding-mobile: 20px;

    /**************************************
    Radier / skuggor
    **************************************/

    --radius-small: 8px;
    --radius-medium: 12px;
    --radius-large: 16px;
    --radius-pill: 999px;

    --shadow-card: 0 8px 25px rgba(0,0,0,0.08);
    --shadow-card-hover: 0 12px 30px rgba(0,0,0,0.12);



    /**************************************
    Skin / Layout Engine
    **************************************/

    --skin-sidebar-start: var(--color-primary-dark);
    --skin-sidebar-end: var(--color-primary);
    --skin-sidebar-text: #ffffff;
    --skin-sidebar-muted: rgba(255,255,255,0.66);
    --skin-sidebar-hover: rgba(255,255,255,0.12);
    --skin-sidebar-active-bg: #ffffff;
    --skin-sidebar-active-text: var(--color-primary);

    --skin-topbar-bg: rgba(255,255,255,0.94);
    --skin-topbar-border: var(--color-border);

    --skin-dev-bg: #d60000;
    --skin-dev-text: #ffffff;

    --sidebar-width: 280px;
    --sidebar-width-compact: 245px;
    --sidebar-logo-width: 145px;
    --sidebar-logo-height: 46px;
    --topbar-height: 72px;
    --footer-height: 58px;

    --space-xxs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 18px;
    --space-lg: 24px;
    --space-xl: 32px;

    /**************************************
    Header / footer
    **************************************/

    --header-text-color: #ffffff;
    --header-gradient-start: var(--color-primary-dark);
    --header-gradient-end: var(--color-primary);

    --footer-text-color: var(--color-muted);

    /**************************************
    Animationer
    **************************************/

    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
}