/*
 * Design Tokens – TipTopTrafik-inspireret tema
 * Primær: Dyb marineblå #13385b  ·  Accent: Orange #ee7c00
 * Mobil-first – kompakt skala opbygget nedefra
 */

/* ── Mobil (standard) ── */
:root {
    /* Brandfarver */
    --app-color-primary:            #13385b;
    --app-color-primary-strong:     #0d2640;
    --app-color-primary-mid:        #334862;
    --app-color-primary-light:      #396093;
    --app-color-accent:             #ee7c00;
    --app-color-accent-hover:       #f99b1c;
    --app-color-accent-soft:        #fff3e0;

    /* Overflader */
    --app-color-surface:            #f7f9ff;
    --app-color-surface-alt:        #ffffff;
    --app-color-surface-tint:       #e1eef3;
    --app-color-border:             #d5e1e9;

    /* Tekst */
    --app-color-text:               #0f1c2c;
    --app-color-muted:              #4a6b8a;
    --app-color-text-inverse:       #ffffff;

    /* Statusfarver */
    --app-color-success:            #2a7d32;
    --app-color-error:              #c92a2a;
    --app-color-info:               #396093;
    --app-color-warning:            #ee7c00;
    --app-contrast-color:           #ee7c00;

    /* Lektionstyper */
    --app-drivinglessons-color:             #13385b;
    --app-drivinglessons-text-color:        #ffffff;
    --app-theorilessons-color:              #ee7c00;
    --app-theorilessons-text-color:         #0f1c2c;
    --app-manouvrelessons-color:            #0d2640;
    --app-safedrivinglessons-color:         #396093;
    --app-extralessons-color:               #334862;
    --app-cafetheorylessons-color:          #f99b1c;
    --app-cafetheorylessons-text-color:     #0f1c2c;
    --app-hometheorylessons-color:          #ee7c00;
    --app-hometheorylessons-text-color:     #0f1c2c;
    --app-theorytest-color:                 #0e7c59;
    --app-drivingtest-color:                #6f42c1;
    --app-NoPass-color:                     #8b1e3f;
    --app-NoShow-color:                     #4a6b8a;
    --app-firstaid-color:                   #c92a2a;

    /* Navigation */
    --app-nav-bg:                   #13385b;
    --app-nav-active-bg:            rgba(238, 124, 0, 0.18);
    --app-nav-active-color:         #f99b1c;
    --app-nav-hover-bg:             rgba(255, 255, 255, 0.09);

    /* Links */
    --app-default-link-color:       #396093;

    /* Typografi (mobil-first – vokser ved breakpoints) */
    --app-font-family:  'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
    --app-font-xs:      0.75rem;
    --app-font-sm:      0.875rem;
    --app-font-md:      1rem;
    --app-font-lg:      1.125rem;
    --app-font-xl:      1.25rem;
    --app-font-2xl:     1.35rem;
    --app-font-3xl:     1.65rem;

    /* Afstand (mobil-first) */
    --app-space-xs:     0.25rem;
    --app-space-sm:     0.5rem;
    --app-space-md:     1rem;
    --app-space-lg:     1.25rem;
    --app-space-xl:     1.5rem;

    /* Rundede hjørner */
    --app-radius-sm:    6px;
    --app-radius-md:    12px;
    --app-radius-lg:    18px;
    --app-radius:       12px;

    /* Skygger */
    --app-shadow-sm:    0 2px 6px  rgba(19, 56, 91, 0.08);
    --app-shadow-md:    0 4px 16px rgba(19, 56, 91, 0.12);
    --app-shadow-lg:    0 8px 32px rgba(19, 56, 91, 0.18);
}

html,
body {
    background:             var(--app-color-surface);
    color:                  var(--app-color-text);
    font-family:            var(--app-font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.page,
main,
.content {
    max-width: 100%;
}

/* ── Tablet ── */
@media (min-width: 768px) and (max-width: 1199px) {
    :root {
        --app-font-2xl:  1.45rem;
        --app-font-3xl:  1.75rem;
        --app-space-lg:  1.5rem;
        --app-space-xl:  1.75rem;
    }

    .content {
        padding-inline: var(--app-space-lg);
    }
}

/* ── Desktop ── */
@media (min-width: 1200px) {
    :root {
        --app-font-2xl:  1.5rem;
        --app-font-3xl:  1.875rem;
        --app-space-lg:  1.5rem;
        --app-space-xl:  2rem;
    }

    .content {
        padding-inline:  var(--app-space-xl);
        margin-inline:   auto;
        max-width:       1200px;
    }
}