/* ============================================================
   htill.de — OFFICIAL DESIGN TOKENS
   Approved by user: 2026-07-28
   WCAG AA/AAA compliant, HSL-basiert
   ============================================================ */

:root {
  /* === BLUE SCALE (Wand-Familie, H=213°) === */
  --blue-700: #071c35;   /* Footer, deep backgrounds */
  --blue-600: #0f2f56;   /* Sky section (sekundär) */
  --blue-500: #184275;   /* PRIMARY wand (Hero, default bg) */
  --blue-400: #2c64a8;   /* Card BG */

  /* === ORANGE SCALE (Akzent-Familie, H=21°) === */
  --orange-700: #963c0c; /* Headings auf hellem BG */
  --orange-500: #c85a25; /* Reserved / Mid-accent */
  --orange-300: #eb8650; /* Hero-Headline / Akzent-Text */
  --orange-button:       #e25b12; /* CTA Button */
  --orange-button-hover: #f36d24; /* Hover State */

  /* === CREAM SCALE (Off-White-Familie, H=39°) === */
  --cream-50:  #fcfaf7;  /* Pure light, Text auf dark */
  --cream-100: #f4efe5;  /* Section BG (light sections) */
  --cream-200: #e9dfcd;  /* Tag/Pill labels */

  /* === SEMANTIC TOKENS === */
  --bg-primary:       var(--blue-500);
  --bg-secondary:     var(--blue-600);
  --bg-tertiary:      var(--blue-700);
  --bg-light:         var(--cream-100);

  --text-on-dark:     var(--cream-50);
  --text-on-light:    var(--blue-700);
  --text-heading-dark: var(--orange-300);  /* Headline auf blauem BG */
  --text-heading-light: var(--orange-700); /* Headline auf hellem BG */
  --text-on-button:   var(--blue-700);

  --accent-button:    var(--orange-button);
  --accent-button-hover: var(--orange-button-hover);
  --accent-tag:       var(--cream-200);
}

/* === TOKEN USAGE GUIDE === */
/*
   Hero / Wand:           background: var(--bg-primary);
   Sky section:           background: var(--bg-secondary);
   Cream section:         background: var(--bg-light);
   Footer:                background: var(--bg-tertiary);

   Headline auf dunklem:  color: var(--text-heading-dark);
   Headline auf hellem:   color: var(--text-heading-light);
   Body auf dunklem:      color: var(--text-on-dark);
   Body auf hellem:       color: var(--text-on-light);

   Button:                background: var(--accent-button);
                          color: var(--text-on-button);
   Button hover:          background: var(--accent-button-hover);

   Tag/Pill:              background: var(--accent-tag);
                          color: var(--text-on-light);
*/