/* ============================================================
   SOLARLUX — COLOR TOKENS  (Corporate Design 2026)
   Source: "Brand und Design Guidelines", Kurzversion 2026 · Hausfarben + Produktfarben.
   ============================================================ */
:root {
  /* --- Hausfarben (official) --- */
  --sl-rot:      #d51130;  /* Solarlux Rot · HKS 15 K · Pantone 1797 · CMYK 10/100/80/0 · RAL 2020 */
  --sl-grau-85:  #4a4a49;  /* HKS 88 K 85 % · Pantone Cool Gray 11 · RAL 7011 */
  --sl-grau-65:  #7d7c7d;  /* HKS 88 K 65 % · Pantone Cool Gray 9 · RAL 7046 */
  --sl-grau-45:  #a8a8a7;  /* HKS 88 K 45 % · Pantone Cool Gray 7 · RAL 7040 — Faltwand-Symbol */
  --sl-grau-25:  #c2c2c2;  /* HKS 88 K 25 % · Pantone Cool Gray 4 */
  --sl-grau-10:  #dcdcdc;  /* HKS 88 K 10 % · Pantone Cool Gray 2 */
  --sl-white:    #ffffff;

  /* --- Produktfarben (official; for product-specific media, lists, tables) --- */
  --sl-prod-schiebesystem:         #c2bea3;
  --sl-prod-glas-faltwand:         #a2aa68;
  --sl-prod-horizontal-schiebewand:#b88277;
  --sl-prod-balkonverglasung:      #7c929e;
  --sl-prod-wintergarten:          #ac9074;
  --sl-prod-terrassendach:         #ceb976;

  /* --- Digital red ramp (derived from Solarlux Rot for UI states) --- */
  --sl-red-50:  #fdeef1;
  --sl-red-100: #fad3da;
  --sl-red-300: #ee7286;
  --sl-red-500: var(--sl-rot);
  --sl-red-600: #bb0e2a;  /* hover */
  --sl-red-700: #9a0b22;  /* pressed */
  --sl-red-900: #5c0610;

  /* --- Digital surface tints (derived, lighter than Grau 10) --- */
  --sl-grau-05:  #eeeeee;
  --sl-grau-03:  #f5f5f5;

  /* --- Legacy aliases (pre-2026 names → CD 2026 values) --- */
  --sl-ink:      var(--sl-grau-85);
  --sl-anthra:   var(--sl-grau-85);
  --sl-grey-700: var(--sl-grau-65);
  --sl-grey-500: var(--sl-grau-65);
  --sl-grey-400: var(--sl-grau-45);
  --sl-grey-300: var(--sl-grau-25);
  --sl-grey-200: var(--sl-grau-10);
  --sl-grey-100: var(--sl-grau-05);
  --sl-grey-50:  var(--sl-grau-03);
  --sl-glass:    var(--sl-prod-balkonverglasung);

  /* --- Semantic status --- */
  --sl-success:  #2f7d4f;
  --sl-warning:  #c8871a;
  --sl-error:    var(--sl-rot);
  --sl-info:     var(--sl-grau-85);

  /* ============================================================
     SEMANTIC ALIASES — reference these in components
     ============================================================ */
  --color-brand:            var(--sl-rot);
  --color-brand-hover:      var(--sl-red-600);
  --color-brand-active:     var(--sl-red-700);
  --color-brand-subtle:     var(--sl-red-50);

  --text-primary:           var(--sl-grau-85);
  --text-body:              var(--sl-grau-85);
  --text-secondary:         var(--sl-grau-65);
  --text-muted:             var(--sl-grau-65);
  --text-on-brand:          var(--sl-white);
  --text-on-dark:           var(--sl-white);
  --text-link:              var(--sl-rot);
  --text-link-hover:        var(--sl-red-600);

  --surface-page:           var(--sl-white);
  --surface-card:           var(--sl-white);
  --surface-raised:         var(--sl-white);
  --surface-sunken:         var(--sl-grau-03);
  --surface-inverse:        var(--sl-grau-85);
  --surface-inverse-strong: var(--sl-grau-85);
  --surface-brand:          var(--sl-rot);   /* chapter slides / campaign bands */

  --border-subtle:          var(--sl-grau-10);
  --border-default:         var(--sl-grau-25);
  --border-strong:          var(--sl-grau-45);
  --border-focus:           var(--sl-rot);

  --icon-default:           var(--sl-grau-85);
  --icon-muted:             var(--sl-grau-45);
  --icon-brand:             var(--sl-rot);
}