:root {
  /* ── DESIGN.md brand colors ── */
  --primary:         #5645d4;
  --primary-pressed: #4534b3;
  --primary-deep:    #3a2a99;
  --on-primary:      #ffffff;
  --brand-navy:      #0a1530;
  --link-blue:       #0075de;

  /* ── Surface ── */
  --canvas:           #ffffff;
  --surface:          #f6f5f4;
  --surface-soft:     #fafaf9;
  --hairline:         #e5e3df;
  --hairline-soft:    #ede9e4;
  --hairline-strong:  #c8c4be;

  /* ── Text ── */
  --ink-deep: #000000;
  --ink:      #1a1a1a;
  --charcoal: #37352f;
  --slate:    #5d5b54;
  --steel:    #787671;
  --stone:    #a4a097;
  --muted:    #bbb8b1;
  --on-dark:  #ffffff;

  /* ── Card tints ── */
  --tint-peach:    #ffe8d4;
  --tint-rose:     #fde0ec;
  --tint-mint:     #d9f3e1;
  --tint-lavender: #e6e0f5;
  --tint-sky:      #dcecfa;
  --tint-yellow:   #fef7d6;

  /* ── Semantic ── */
  --success: #1aae39;
  --warning: #dd5b00;
  --error:   #e03131;

  /* ── App-specific: Korean market (up=red, down=blue) ── */
  --price-up:   #e03131;
  --price-down: #0075de;

  /* ── Radius ── */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-xxl:  20px;
  --r-full: 9999px;

  /* ── Spacing ── */
  --sp-xxs: 4px;
  --sp-xs:  8px;
  --sp-sm:  12px;
  --sp-md:  16px;
  --sp-lg:  20px;
  --sp-xl:  24px;
  --sp-xxl: 32px;

  /* ── Elevation ── */
  --shadow-modal: rgba(15,15,15,0.16) 0px 16px 48px -8px;
  --shadow-card:  rgba(15,15,15,0.08) 0px 4px 12px 0px;

  /* ── Layout ── */
  --header-height: 56px;
}