/* ALB-PACKA Color Tokens */

:root {
  /* ── Base Palette ── */
  --color-creme:   #f5b298;
  --color-cyan:    #02b2cc;
  --color-blue:    #103a4b;
  --color-lilac:   #a09fc1;
  --color-grey:    #e8edec;
  --color-white:   #ffffff;
  --color-black:   #000000;

  /* ── Tints (lighter) ── */
  --color-creme-light: #fad4c3;
  --color-creme-dark:  #e0895e;
  --color-cyan-light:  #6fd8e8;
  --color-cyan-dark:   #018fa2;
  --color-blue-light:  #1d5a72;
  --color-blue-dark:   #09202c;

  /* ── Semantic Surface ── */
  --surface-base:      var(--color-white);
  --surface-muted:     var(--color-grey);
  --surface-primary:   var(--color-creme);
  --surface-secondary: var(--color-cyan);
  --surface-dark:      var(--color-blue);
  --surface-accent:    var(--color-lilac);

  /* ── Semantic Text ── */
  --text-primary:   var(--color-blue);
  --text-secondary: #2a5a70;
  --text-muted:     var(--color-lilac);
  --text-on-dark:   var(--color-white);
  --text-on-creme:  var(--color-blue);
  --text-on-cyan:   var(--color-white);

  /* ── Semantic Interactive ── */
  --color-action:         var(--color-cyan);
  --color-action-hover:   var(--color-cyan-dark);
  --color-action-pressed: #016e80;

  /* ── Status ── */
  --color-success: #2d9e6a;
  --color-warning: #e8a020;
  --color-error:   #d94040;
  --color-info:    var(--color-cyan);
}