@charset "UTF-8";
/*──────────────────────────────────────────────
  TOKENS.CSS – Designsystem-Basis
  © 2025 seltsam. STUDIO FÜR VISUELLE MEDIEN
──────────────────────────────────────────────*/

/*──────────────────────────────────────────────
  FONT DEFINITIONS
──────────────────────────────────────────────*/
@font-face {
 font-family: 'Roboto';
 font-style: normal;
 font-weight: 300;
 src: url('../webfonts/roboto-v30-latin-300.woff2') format('woff2'),
 url('../webfonts/roboto-v30-latin-300.woff') format('woff');
}
@font-face {
 font-family: 'Roboto';
 font-style: normal;
 font-weight: 400;
 src: url('../webfonts/roboto-v30-latin-regular.woff2') format('woff2'),
 url('../webfonts/roboto-v30-latin-regular.woff') format('woff');
}
@font-face {
 font-family: 'Roboto';
 font-style: normal;
 font-weight: 700;
 src: url('../webfonts/roboto-v30-latin-700.woff2') format('woff2'),
 url('../webfonts/roboto-v30-latin-700.woff') format('woff');
}

/*──────────────────────────────────────────────
  ROOT TOKENS
──────────────────────────────────────────────*/
:root {
 /*──────────────────────────────
   BRAND COLORS
 ──────────────────────────────*/
 --color-primary: #75AC43;
 --color-primary-dark: #408000;
 --color-primary-bright: #96BD00;
 --color-grey: #333333;
 --color-white: #ffffff;
 --color-black: #000000;

 /*──────────────────────────────
   SEMANTIC COLORS
 ──────────────────────────────*/
 --color-bg: var(--color-white);
 --color-text: var(--color-grey);

 /* Section Themes */
 --section-bg-light: var(--color-white);
 --section-text-light: var(--color-grey);
 --section-bg-dark: var(--color-grey);
 --section-text-dark: var(--color-white);
 --section-bg-accent: var(--color-primary);
 --section-text-accent: var(--color-white);

 /* Links */
 --color-link: var(--color-primary);
 --color-link-hover: var(--color-primary-dark);
 --color-link-active: var(--color-primary-bright);

 /*──────────────────────────────
   BOOTSTRAP MAPPING
 ──────────────────────────────*/
 --bs-primary: var(--color-primary);
 --bs-primary-rgb: var(--color-primary-rgb, 117, 172, 67);
 --bs-secondary: var(--color-grey);
 --bs-success: var(--color-primary-bright);
 --bs-info: #5cbcdc;
 --bs-warning: #ffcc00;
 --bs-danger: #cc0000;
 --bs-light: #f8f9fa;
 --bs-dark: var(--color-grey);
 --bs-body-font-family: var(--font-base);
 --bs-body-font-weight: var(--font-weight-regular);

 /*──────────────────────────────
   TYPOGRAPHY SCALE (RESPONSIVE)
 ──────────────────────────────*/
 --font-base: 'Roboto', Arial, sans-serif;

 --font-weight-light: 300;
 --font-weight-regular: 400;
 --font-weight-bold: 700;

 /* Font Sizes – Fluid Scaling */
 --font-size-base: clamp(0.9rem, 1vw, 1rem);           /* 14-16px */
 --font-size-md: clamp(1.125rem, 1.5vw, 1.25rem);      /* 18-20px */
 --font-size-lg: clamp(1.25rem, 2vw, 1.5rem);          /* 20-24px */
 --font-size-xl: clamp(1.75rem, 3.5vw, 2.5rem);        /* 28-40px */
 --font-size-xxl: clamp(2rem, 5vw, 3.75rem);           /* 32-60px */
 --font-size-hero: clamp(2.5rem, 8vw, 6.25rem);        /* 40-100px */
 --font-size-button: clamp(1.5rem, 2.5vw, 1.75rem);    /* 24-28px */

 --line-height-base: 1.6;
 --line-height-tight: 1.2;
 --line-height-loose: 1.8;

 /*──────────────────────────────
   SPACING & EFFECTS (RESPONSIVE)
 ──────────────────────────────*/
 /* Basic Spacing – Subtile Skalierung */
 --space-xs: 0.25rem;                              /* 4px – fix */
 --space-sm: 0.5rem;                               /* 8px – fix */
 --space-md: clamp(0.75rem, 1.5vw, 1rem);         /* 12-16px */
 --space-lg: clamp(1.5rem, 3vw, 2rem);            /* 24-32px */
 --space-xl: clamp(2.5rem, 5vw, 4rem);            /* 40-64px */

 /* Section Spacing – Stärkere Skalierung */
 --space-section-sm: clamp(2rem, 5vw, 3rem);      /* 32-48px */
 --space-section-md: clamp(3rem, 7vw, 5rem);      /* 48-80px */
 --space-section-lg: clamp(4rem, 10vw, 8rem);     /* 64-128px */

 /* Container Spacing */
 --space-container-padding: clamp(1rem, 3vw, 2rem); /* 16-32px seitlich */
 --space-grid-gap: clamp(1rem, 2vw, 2rem);          /* Grid/Flex Gaps */

 --radius-base: 0.25rem;
 --radius-lg: 0.5rem;

 /*──────────────────────────────────────────────
   SHADOWS
 ──────────────────────────────────────────────*/
 --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
 --shadow-md: 0 5px 10px rgba(0,0,0,.20);
 --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.3);

 --transition-speed: 0.25s;

 /*──────────────────────────────
   ICONS
 ──────────────────────────────*/
 --icon-size-sm: 1rem;
 --icon-size-base: 1.25rem;
 --icon-size-lg: 1.75rem;
 --icon-color: var(--color-primary);
}