/**
 * Vklass CSS Variables
 * Extracted from existing mockups (IUP v3, Betygsregistrering v1, Bedömningsmatris v1)
 * Version: 1.0.0
 */

:root {
    /* ==================== Theme Colors ==================== */
    /* Primary Blues - Vklass Brand */
    --cl-hard: #26418f;           /* Primary Vklass blue - main actions, branding */
    --cl-medium: #5c6bc0;         /* Medium blue - secondary elements */
    --cl-soft: #9999cc;           /* Soft blue - tertiary */
    --cl-softer: #dee1ed;         /* Very soft blue - backgrounds */
    --cl-super-soft: #f0f3fc;     /* Super soft blue - subtle backgrounds */
    --cl-soft-background: #c5cae9; /* Soft background blue */
    
    /* Convenience aliases */
    --primary-blue: var(--cl-hard);
    --primary-color: var(--cl-hard);
    
    /* ==================== Accent Colors ==================== */
    --cl-green: #73bc56;          /* Success, positive states, FAB */
    --cl-yellow: #f6a623;         /* Warning, attention needed */
    --cl-red: #f44336;            /* Error, critical actions */
    
    /* ==================== Grayscale ==================== */
    --white: #fff;
    --gray-lightest: #fafafa;
    --gray-lighter: #eee;
    --gray-smooth: #e0e0e0;
    --gray-light: #c8c8c8;
    --gray: #a4a4a4;
    --gray-dark: #6d6d6d;
    --gray-darker: #4a4a4a;
    --black: #000;
    
    /* ==================== State Colors ==================== */
    --color-success: var(--cl-hard);
    --color-info: var(--cl-hard);
    --color-warning: var(--cl-yellow);
    --color-error: var(--cl-red);
    --color-positive: var(--cl-green);
    --color-negative: var(--cl-red);
    
    /* ==================== Layout Dimensions ==================== */
    --toolbar-height: 64px;
    --permanent-drawer-width: 280px;
    --collapsible-drawer-closed-width: 56px;
    --content-container-max-width: 1562px;
    --content-padding-horizontal: 24px;
    --content-padding-horizontal-phone: 16px;
    
    /* ==================== Spacing Scale ==================== */
    /* Based on 13px grid system */
    --gap: 8px;
    --gap-double: 16px;
    --gap-half: 4px;
    
    /* Spacing utilities */
    --spacing-xs: 4px;
    --spacing-s: 8px;
    --spacing-m: 16px;
    --spacing-l: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;
    
    /* ==================== Typography ==================== */
    --font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --line-height-base: 20px;
    --letter-spacing: 0.01em;
    
    /* Font sizes */
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-s: 0.875rem;      /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-m: 1.125rem;      /* 18px */
    --font-size-l: 1.25rem;       /* 20px */
    --font-size-xl: 1.5rem;       /* 24px */
    --font-size-xxl: 2rem;        /* 32px */
    
    /* Font weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    
    /* ==================== Shadows ==================== */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-3: 0 4px 8px rgba(0, 0, 0, 0.12);
    --shadow-4: 0 8px 16px rgba(0, 0, 0, 0.15);
    --shadow-5: 0 16px 32px rgba(0, 0, 0, 0.2);
    
    /* ==================== Border Radius ==================== */
    --border-radius-s: 2px;
    --border-radius-m: 4px;
    --border-radius-l: 8px;
    --border-radius-pill: 16px;
    --border-radius-circle: 50%;
    
    /* ==================== Transitions ==================== */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    
    /* ==================== Z-Index Scale ==================== */
    --z-index-base: 1;
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;
    
    /* ==================== Breakpoints (for JS) ==================== */
    --breakpoint-phone: 600px;
    --breakpoint-phone-landscape: 960px;
    --breakpoint-tablet: 1280px;
    --breakpoint-desktop: 1920px;
    
    /* Legacy breakpoint names */
    --phone-max: 599px;
    --phone-landscape-max: 959px;
    --tablet-max: 1279px;
    --tablet-landscape-min: 960px;
    --desktop-min: 1280px;
}

/* ==================== Base Resets ==================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-family: var(--font-family);
    line-height: var(--line-height-base);
    letter-spacing: var(--letter-spacing);
    color: var(--gray-darker);
    height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-color: var(--gray-lightest);
    line-height: var(--line-height-base);
}

/* ==================== Typography Base Styles ==================== */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.5em 0;
    font-weight: var(--font-weight-normal);
    color: var(--gray-darker);
    line-height: 1.2;
}

h1 { font-size: var(--font-size-xxl); font-weight: var(--font-weight-normal); }
h2 { font-size: var(--font-size-xl); font-weight: var(--font-weight-normal); }
h3 { font-size: var(--font-size-l); font-weight: var(--font-weight-medium); }
h4 { font-size: var(--font-size-m); font-weight: var(--font-weight-medium); }
h5 { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); }
h6 { font-size: var(--font-size-s); font-weight: var(--font-weight-medium); }

p {
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

a {
    color: var(--primary-blue);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ==================== Common Element Styles ==================== */
button {
    font-family: inherit;
    cursor: pointer;
}

input, select, textarea {
    font-family: inherit;
}

/* Remove default button styles */
button:focus {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

/* ==================== Responsive Typography ==================== */
@media (max-width: 768px) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.375rem; }
    h3 { font-size: 1.125rem; }
}