@layer reset, tokens, base, layout, components, utilities;

@layer tokens {
  :root {
    color-scheme: light;

    /* Colors – Farbwelt der bisherigen der-norden.de */
    --color-brand-blue: #0f4291;
    --color-brand-blue-light: #2557a9;
    --color-brand-red: #b3003c;
    --color-brand-beige: #f2e8e1;
    --color-heading-dark: #002a5f;
    --color-footer: #323538;
    --color-footer-dark: #22272b;

    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-text: #323538;
    --color-muted: #5f6368;
    --color-border: #e6e6e6;
    --color-shadow: rgba(0, 0, 0, 0.14);
    --color-primary: var(--color-brand-blue);
    --color-primary-hover: var(--color-brand-red);
    --color-text-invert: #ffffff;

    /* Typography */
    --font-family-sans: 'Lato', Arial, Helvetica, sans-serif;
    --font-family-display: 'Oswald', Arial, Helvetica, sans-serif;
    --font-family-script: 'Sacramento', cursive;
    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
      monospace;

    /* Use these for actual styling */
    --font-family-body: var(--font-family-sans);
    --font-family-heading: var(--font-family-display);

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-base: 1.5;
    --line-height-tight: 1.5;

    --font-size-body: 1rem;
    --font-size-small: 0.875rem;

    --font-size-h1: clamp(2rem, 1.2rem + 2.4vw, 2.6rem);
    --font-size-h2: clamp(2rem, 1.2rem + 2.4vw, 2.6rem);
    --font-size-h3: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
    --font-size-h4: 1.4rem;

    /* Spacing */
    --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 */

    /* Layout */
    --container-max: 80rem; /* 1280px wie bisher */
    --container-padding: 4%;
    --section-padding-y: 4rem;

    /* Radius / shadow */
    --radius-sm: 0.625rem; /* 10px */
    --radius-full: 999px;
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.15);

	    /* Onepager component tokens */
	    --onepager-nav-offset: 3rem;
	    --onepager-nav-z: 1000;
	    --onepager-to-top-z: 1100;
	    --onepager-nav-bg: rgba(255, 255, 255, 0.98);
	    --onepager-to-top-size: 3rem; /* 48px */

    /* Onepager section tokens (use in page properties) */
    --onepager-section-bg: var(--color-bg);
    --onepager-section-bg-alt: var(--color-brand-beige);
    --onepager-section-bg-accent: color-mix(in srgb, var(--color-primary), var(--color-bg) 88%);
    --onepager-section-text: var(--color-text);
    --onepager-section-text-muted: var(--color-muted);
    --onepager-section-text-invert: var(--color-text-invert);
    --onepager-overlay-color: #000000;
    --onepager-overlay-color-soft: color-mix(in srgb, #000000, transparent 35%);
  }


}