/* ============================================================
   Elysium+ Design System — Color Tokens
   ============================================================ */

:root {
  /* ── Brand Mark ── */
  --color-periwinkle:          #7B9AD0;   /* painted heart logo */
  --color-periwinkle-light:    #A8BEE3;
  --color-periwinkle-pale:     #D6E3F4;

  /* ── Primary ── */
  --color-blue:                #163A70;   /* Deep European Blue */
  --color-blue-700:            #1A4585;
  --color-blue-600:            #1F539C;
  --color-blue-500:            #2563B8;
  --color-blue-400:            #4D82CC;
  --color-blue-300:            #82AADB;
  --color-blue-200:            #B5CCEC;
  --color-blue-100:            #D8E6F5;
  --color-blue-50:             #EEF4FB;

  --color-ivory:               #F7F2EA;   /* Warm Ivory */
  --color-ivory-700:           #EDE5D5;
  --color-ivory-600:           #E4D9C5;
  --color-ivory-500:           #D8CEBA;
  --color-ivory-200:           #FAF7F2;
  --color-ivory-100:           #FDFBF8;

  /* ── Secondary ── */
  --color-terracotta:          #D96C47;   /* Terracotta */
  --color-terracotta-700:      #B8522D;
  --color-terracotta-300:      #E99577;
  --color-terracotta-100:      #F8E0D6;

  --color-green:               #345D4B;   /* Forest Green */
  --color-green-700:           #264438;
  --color-green-300:           #5E8F78;
  --color-green-100:           #D0E5DC;

  --color-ochre:               #D4A43A;   /* Golden Ochre */
  --color-ochre-700:           #A87E24;
  --color-ochre-300:           #E3C06D;
  --color-ochre-100:           #F7EDCC;

  /* ── Accent ── */
  --color-yellow:              #F5C842;   /* Bright Erasmus Yellow */
  --color-yellow-300:          #FAD96C;
  --color-yellow-100:          #FEF5CC;

  --color-burgundy:            #7A1E32;   /* Deep Burgundy */
  --color-burgundy-300:        #B0546A;
  --color-burgundy-100:        #F2D5DC;

  /* ── Neutrals ── */
  --color-ink:                 #0F0F0F;
  --color-ink-soft:            #2A2A2A;
  --color-muted:               #7A7060;
  --color-muted-light:         #A89F94;
  --color-border:              rgba(22, 58, 112, 0.12);
  --color-border-strong:       rgba(22, 58, 112, 0.25);
  --color-white:               #FFFFFF;

  /* ── Semantic ── */
  --color-bg:                  var(--color-ivory);
  --color-bg-elevated:         var(--color-ivory-100);
  --color-bg-inset:            var(--color-ivory-700);
  --color-fg:                  var(--color-blue);
  --color-fg-body:             var(--color-ink-soft);
  --color-fg-muted:            var(--color-muted);
  --color-surface:             var(--color-white);
  --color-surface-raised:      var(--color-ivory-200);
  --color-accent-primary:      var(--color-terracotta);
  --color-accent-warm:         var(--color-ochre);
  --color-accent-nature:       var(--color-green);
}