/* * Fil: /www/css/layout.css 
 * Beskrivelse: Globale variabler, reset og hovedstruktur.
 */

:root {
    /* --- Engineered Clarity Palette --- */
    --bg-dark: #1a252f;       /* Hovedbakgrunn (Wet Asphalt) */
    --bg-panel: #2c3e50;      /* Panel/Kort (Midnight Blue) */
    --bg-input: #34495e;      /* Input felt */
    
    --text-main: #ecf0f1;     /* Hovedtekst (Nesten hvit) */
    --text-muted: #bdc3c7;    /* Sekundærtekst (Sølv) */
    
    --accent-blue: #34495e;   /* Lenker, Ikoner */
    --accent-orange: #df7902; /* CTA, Knapper (Weboracle Orange) */
    --accent-red: #e74c3c;    /* Feilmeldinger */
    --accent-green: #27ae60;  /* Suksess */

    --font-ui: 'Inter', -apple-system, sans-serif;
    --font-code: 'Fira Code', monospace;

    --radius: 6px;
    --shadow: 0 4px 20px rgba(0,0,0,0.3);
    --shadow-hover: 0 10px 30px rgba(0,0,0,0.6);
}

/* --- Reset & Base --- */
* { box-sizing: border-box; }

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-ui);
    margin: 0;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-blue); text-decoration: none; transition: 0.2s; }
a:hover { color: #fff; text-decoration: underline; }

/* --- Layout Grid --- */
.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#main-content-container {
    flex: 1; /* Presser footer ned */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
    transition: opacity 0.3s ease;
}

.main-content-area.full-width {
    width: 100%;
}

/* Hjelpeklasser */
.center-text { text-align: center; }
.hidden { display: none; }

/* Scrollbar styling (Chrome/Safari) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: var(--bg-panel); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-blue); }