/* Design-tokens — single source of truth for farger, spacing, typografi.
 * Brukes via CSS custom properties. Tab-spesifikk CSS skal IKKE definere
 * fargetall direkte — referer alltid til en token her. */

:root {
    /* Litteraturhuset-palett */
    --lh-1: #edffe0;   /* lyseste grønn (bakgrunn) */
    --lh-2: #4ab200;   /* primær grønn */
    --lh-3: #4d9916;   /* sekundær grønn */
    --lh-4: #265b00;   /* mørk grønn (border, tekst) */
    --lh-5: #1a3f00;   /* mørkest grønn */

    /* Bakgrunn */
    --bg-primary: #ffffff;
    --bg-secondary: #edffe0;
    --bg-tertiary: #edffe0;
    --bg-card: #ffffff;

    /* Border */
    --border: var(--lh-4);
    --border-light: rgba(38, 91, 0, 0.19);  /* var(--lh-4) ved 30% */

    /* Tekst */
    --text-primary: var(--lh-4);
    --text-secondary: var(--lh-4);
    --text-muted: var(--lh-3);

    /* Aksent og status */
    --accent: var(--lh-4);
    --green: var(--lh-2);
    --green-dim: rgba(74, 178, 0, 0.08);
    --orange: #e07800;
    --orange-dim: rgba(224, 120, 0, 0.08);
    --red: #cc3333;
    --red-dim: rgba(204, 51, 51, 0.07);
    --cyan: #0088aa;
    --cyan-dim: rgba(0, 136, 170, 0.07);
    --purple: #7c5cbf;
    --purple-dim: rgba(124, 92, 191, 0.07);
    --yellow: #b08c00;
    --yellow-dim: rgba(176, 140, 0, 0.07);

    /* Salgs-bånd */
    --bar-normal: var(--lh-3);
    --bar-hot: var(--orange);
    --bar-soldout: var(--lh-2);

    /* Spacing-skala (multipler av 4px) */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */

    /* Typografi-skala */
    --fs-xs: 0.65rem;
    --fs-sm: 0.75rem;
    --fs-base: 0.875rem;
    --fs-md: 1rem;
    --fs-lg: 1.1rem;
    --fs-xl: 1.5rem;
    --fs-2xl: 2rem;
    --fs-3xl: 3rem;

    /* Border-radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 12px;

    /* (Shadow flyttet til Elevation-blokk under) */

    /* Easing */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Transition */
    --tx-fast: 0.15s var(--ease-out);
    --tx-base: 0.2s var(--ease-out);
    --tx-slow: 0.35s var(--ease-out);

    /* Elevation (grønn-tintet for å passe LH-paletten) */
    --shadow-sm: 0 1px 2px rgba(38, 91, 0, 0.05);
    --shadow-md: 0 2px 8px rgba(38, 91, 0, 0.10), 0 4px 16px rgba(38, 91, 0, 0.05);
    --shadow-lg: 0 8px 24px rgba(38, 91, 0, 0.12), 0 16px 48px rgba(38, 91, 0, 0.06);
    --shadow-nav: 0 1px 3px rgba(38, 91, 0, 0.08);
    --elevation-0: none;
    --elevation-1: var(--shadow-sm);
    --elevation-2: var(--shadow-md);
    --elevation-3: var(--shadow-lg);

    /* Layout */
    --container-max: 1280px;
    --nav-height: 64px;
}

/* Hvis Matter SQ ikke er installert, faller vi tilbake til system-font.
 * Prod-deploy kopierer faktiske font-filer til static/fonts/. */
@font-face {
    font-family: 'Matter SQ';
    src: local('Matter SQ'), local('MatterSQ-Regular'),
         url('/static/fonts/MatterSQ-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Matter SQ';
    src: local('Matter SQ Medium'), local('MatterSQ-Medium'),
         url('/static/fonts/MatterSQ-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Matter SQ';
    src: local('Matter SQ SemiBold'), local('MatterSQ-SemiBold'),
         url('/static/fonts/MatterSQ-SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Matter SQ';
    src: local('Matter SQ Bold'), local('MatterSQ-Bold'),
         url('/static/fonts/MatterSQ-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Louize Display Condensed';
    src: local('Louize Display Condensed Bold'),
         url('/static/fonts/Louize%20Display%20Cond%20-%20Bold-205TF.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Louize Display Condensed';
    src: local('Louize Display Condensed Medium'),
         url('/static/fonts/Louize%20Display%20Cond%20-%20Medium-205TF.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-body: 'Matter SQ', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Louize Display Condensed', 'Matter SQ', serif;
    --font-mono: 'Matter SQ', ui-monospace, 'SF Mono', Consolas, monospace;
}