/* =============================================================================
   CashtoCode.de One-Pager – Design Tokens
   -----------------------------------------------------------------------------
   Single Source of Truth fuer alle Designentscheidungen. Basis abgeleitet von
   _reference/design-tokens.SOURCE.css (extrahiert aus cashtocode.com,
   2026-04-30). Zusatz-Tokens (Quelle: internal — landingpage-spec) ergaenzt
   fuer Hero-Skala, Lead-Groesse, Disclaimer, Narrow-Container, Sektions-Padding
   und Motion-Easings.

   Werte werden ausschliesslich ueber var(--token) in styles.css verwendet.
   ============================================================================= */

:root {
  /* ---------- Farben: Marke ---------- */
  --color-primary:        #223ab1;  /* Markenblau */
  --color-primary-hover:  #342df1;  /* tieferes Blau, Hover */
  --color-secondary:      #342df1;
  --color-accent:         #4cfdc8;  /* Cyan-Signalfarbe */

  /* ---------- Farben: Flaechen ---------- */
  --color-bg:             #ffffff;
  --color-surface:        #ffffff;
  --color-surface-alt:    #f5f5f5;  /* heller Grauton fuer abwechselnde Bereiche */

  /* ---------- Farben: Text ---------- */
  --color-text:           #000000;
  --color-text-muted:     #555555;  /* Sekundaertext */
  --color-heading:        #223ab1;  /* Headings auf hellem Grund */
  --color-link:           #223ab1;
  --color-link-hover:     #342df1;

  /* ---------- Farben: Status ---------- */
  --color-success:        #1a7f37;
  --color-warning:        #b54708;
  --color-error:          #b42318;
  --color-info:           #1849a9;

  /* ---------- Farben: Borders ---------- */
  --color-border:         #e0e0e0;
  --color-border-strong:  #b0b0b0;

  /* ---------- Typografie: Familien ---------- */
  --font-sans:    "Open Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-heading: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "Courier New", monospace;

  /* ---------- Typografie: Groessen ---------- */
  --fs-h1:    30px;
  --fs-h2:    24px;
  --fs-h3:    20px;
  --fs-h4:    18px;
  --fs-h5:    16px;
  --fs-h6:    14px;
  --fs-body:  16px;
  --fs-small: 14px;

  /* Zusatz-Tokens (Quelle: internal — landingpage-spec) */
  --fs-hero:  clamp(2rem, 4vw + 1rem, 3.5rem);  /* nur Hero-H1 */
  --fs-lg:    1.125rem;                          /* Lead-Absaetze */
  --fs-xs:    0.6875rem;                         /* Disclaimer / 18+ Hinweise */

  /* ---------- Typografie: Gewicht & Zeilenhoehe ---------- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-bold:     700;
  --lh-tight:    1.2;
  --lh-normal:   1.5;
  --lh-relaxed:  1.7;

  /* ---------- Spacing-Skala ---------- */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  2.5rem;    /* 40px */
  --space-8:  3rem;      /* 48px */
  --space-10: 4rem;      /* 64px */
  --space-12: 6rem;      /* 96px */

  /* ---------- Buttons ---------- */
  --btn-padding-y:   0.75rem;
  --btn-padding-x:   1.5rem;
  --btn-radius:      100px;          /* Pill-Shape – nur Primaer-CTAs */
  --btn-font-weight: 600;
  --btn-font-size:   1rem;
  --btn-transition:  all 0.2s ease;

  /* ---------- Karten / Container ---------- */
  --card-padding:  1.5rem;
  --card-radius:   0.5rem;                        /* 8px */
  --card-shadow:   0 2px 8px rgba(0, 0, 0, 0.08);
  --card-border:   1px solid var(--color-border);

  /* ---------- Formulare ---------- */
  --input-height:     2.75rem;
  --input-padding-x:  0.75rem;
  --input-radius:     0.375rem;
  --input-border:     1px solid var(--color-border);
  --input-focus-ring: 0 0 0 3px rgba(34, 58, 177, 0.2);

  /* ---------- Radien (allgemein) ---------- */
  --radius-sm:   0.25rem;    /*  4px */
  --radius-md:   0.5rem;     /*  8px */
  --radius-lg:   1rem;       /* 16px */
  --radius-full: 9999px;

  /* ---------- Schatten ---------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.10);

  /* ---------- Layout ---------- */
  --container-max:        1200px;
  --container-max-narrow: 768px;   /* Quelle: internal — landingpage-spec */
  --container-padding:    1rem;

  /* Sektions-Padding (Quelle: internal — landingpage-spec) */
  --section-padding-y:    clamp(4rem, 8vw, 6rem);
  --section-padding-y-sm: clamp(3rem, 6vw, 4rem);

  /* ---------- Uebergaenge ---------- */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* Motion-Easings (Quelle: internal — landingpage-spec) */
  --easing-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --easing-default: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* ---------- Breakpoints (fuer JS-Nutzung; CSS nutzt @media) ---------- */
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
}