/* Feature 006 CI Typography Tokens (active-value.de style; no external font CDN per briefing/design.md 004.002) */

@font-face {
    font-family: Barlow;
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/fonts/barlow/barlow-latin-300-normal.woff2') format('woff2');
}

@font-face {
    font-family: Barlow;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/barlow/barlow-latin-500-normal.woff2') format('woff2');
}

@font-face {
    font-family: Barlow;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/barlow/barlow-latin-700-normal.woff2') format('woff2');
}

@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/poppins/poppins-latin-700-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Fjalla One';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/fjalla-one/fjalla-one-latin-400-normal.woff2') format('woff2');
}

:root {
    --font-family-primary: Barlow, Arial, sans-serif;
    --font-family-headline: Poppins, Arial, sans-serif;
    --font-family-accent: Fjalla One, Arial, sans-serif;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;

    --font-weight-light: 300;
    --font-weight-normal: 500;
    --font-weight-medium: 500;
    --font-weight-semibold: 700;
    --font-weight-bold: 700;
    --font-weight-extrabold: 700;
    --font-weight-body-light: 300;
    --font-weight-body-medium: 500;
    --font-weight-body-bold: 700;
    --font-weight-headline-default: 700;

    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
}

body {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
}

p {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
}

a {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-ci-link);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-ci-link-hover);
}

button {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-medium);
}

input {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-normal);
}

textarea {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-normal);
}

select {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-normal);
}

label {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-medium);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-headline);
    font-weight: var(--font-weight-headline-default);
    color: var(--color-headline);
    line-height: var(--line-height-tight);
}

.base-font-weight-light {
    font-weight: var(--font-weight-body-light);
}

.base-font-weight-medium {
    font-weight: var(--font-weight-body-medium);
}

.base-font-weight-bold {
    font-weight: var(--font-weight-body-bold);
}

.base-font-family-accent {
    font-family: var(--font-family-accent);
}