:root {
    /* Spacing */
    --1px: 0.06rem;
    --4px: 0.25rem;
    --8px: 0.5rem;
    --12px: 0.75rem;
    --16px: 1rem;
    --24px: 1.5rem;
    --32px: 2rem;
    --40px: 2.5rem;
    --100px: 6.25rem;
    --300px: 18.75rem;
    --400px: 25rem;
    --600px: 37.5rem;
    --768px: 48rem;
    --1000px: 62.5rem;
  
    /* Colors */
    --background-color: #0d0d0d; /* Hovedbaggrund (biograf mørk) */
    --surface-color: #1e1e1e; /* Sekundær baggrund, fx header/footer */
    --primary-color: #ff9800; /* Orange primær */
    --primary-color-hover: #e67e00;
    --secondary-color: #03a9f4; /* Lyseblå sekundær */
    --secondary-color-hover: #0288d1;
    --text-color-secondary: #bbbbbb;
    --danger-color: #e53935;
    --danger-color-hover: #b71c1c;
    --text-color: #ffffff; /* Hvid tekst */
    --border-color: #2c2c2c; /* Blød mørk kant */
    
    /* Typography */
    --font-family: 'Verdana', Geneva, sans-serif;
    --font-size: var(--16px);
  
    /* Layout */
    --padding: var(--16px);
    --margin-bottom: var(--24px);
    --button-border-radius: var(--4px);
    --modal-max-width: 500px;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    border: none;
}

html, body {
    width: 100%;
    height: 100%;
}
  
body {
    font-family: var(--font-family);
    background-color: #f4f4f4;
    margin: 0;
}