@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
 ──────────────────────────────*/
 --font-base: 'Roboto', Arial, sans-serif;

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

 /* Font Sizes (REM-Basis: 16px = 1rem) */
 --font-size-base: 1rem;        /* 16px */
 --font-size-md: 1.25rem;       /* 20px */
 --font-size-lg: 1.5rem;        /* 24px */
 --font-size-xl: 2.5rem;        /* 40px */
 --font-size-xxl: 3.75rem;      /* 60px */
 --font-size-hero: 6.25rem;     /* 100px */
 --font-size-button: 1.75rem;   /* 28px – Hero Button */

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

 /*──────────────────────────────
   SPACING & EFFECTS
 ──────────────────────────────*/
 --space-xs: 0.25rem;
 --space-sm: 0.5rem;
 --space-md: 1rem;
 --space-lg: 2rem;
 --space-xl: 4rem;

 --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);
}