/* BagDrop — Color Tokens */

:root {
  /* ── Brand Core ── */
  --color-ivory:  #F0E7D5;   /* Main background */
  --color-navy:   #05182C;   /* Sub background, accent (PANTONE 296C) */
  --color-orange: #FF671D;   /* Point color, emphasis (PANTONE 165C) */
  --color-yellow: #FFE633;   /* Character accent — use sparingly on screen */

  /* ── Ivory tints (for layering on ivory bg) ── */
  --color-ivory-100: #FAF6EE;
  --color-ivory-200: #F0E7D5;   /* = --color-ivory */
  --color-ivory-300: #E4D6BC;
  --color-ivory-400: #D2BF9D;
  --color-ivory-500: #B89E7A;

  /* ── Navy tints ── */
  --color-navy-100: #D1D9E3;
  --color-navy-200: #7C92A8;
  --color-navy-300: #3C5872;
  --color-navy-400: #142B43;
  --color-navy-500: #05182C;   /* = --color-navy */
  --color-navy-600: #020D18;

  /* ── Orange tints ── */
  --color-orange-100: #FFE4D6;
  --color-orange-200: #FFBF9E;
  --color-orange-300: #FF9660;
  --color-orange-400: #FF7A37;
  --color-orange-500: #FF671D;   /* = --color-orange */
  --color-orange-600: #D94A06;

  /* ── Neutral scale ── */
  --color-white:     #FFFFFF;
  --color-gray-50:   #FAFAFA;
  --color-gray-100:  #F4F2EE;
  --color-gray-200:  #E8E4DC;
  --color-gray-300:  #D4CEC3;
  --color-gray-400:  #B8B0A3;
  --color-gray-500:  #8C8478;
  --color-gray-600:  #605A52;
  --color-gray-700:  #3D382F;
  --color-gray-800:  #201D16;
  --color-black:     #0A0603;

  /* ── Semantic states ── */
  --color-success:        #2A8F5F;
  --color-success-light:  #D6F0E5;
  --color-warning:        #D9A800;
  --color-warning-light:  #FFF8CC;
  --color-error:          #D63B2F;
  --color-error-light:    #FCE8E7;
  --color-info:           #1A6DB5;
  --color-info-light:     #DEEAF8;

  /* ── Semantic aliases ── */
  --bg-primary:      var(--color-ivory);
  --bg-secondary:    var(--color-navy);
  --bg-accent:       var(--color-orange);
  --bg-surface:      var(--color-ivory-100);
  --bg-muted:        var(--color-gray-100);

  --text-primary:    var(--color-navy);
  --text-on-dark:    var(--color-ivory);
  --text-accent:     var(--color-orange);
  --text-muted:      var(--color-gray-500);
  --text-subtle:     var(--color-gray-400);

  --border-default:  var(--color-gray-300);
  --border-strong:   var(--color-navy);
  --border-accent:   var(--color-orange);
}