/* 푸른느낌 — Color tokens
 * Brand: a green/blue "feeling" — deep teal-green primary, mint, forest.
 * Eco / sustainability / nature. Calm & minimal.
 * Neutrals are warm-green-tinted (not pure grey) to keep the whole
 * surface feeling alive and organic.
 */
:root {
  /* ---- Brand green scale ---- */
  --green-50:  #f0f7f3;
  --green-100: #d9ece2;
  --green-200: #a7d8c4;  /* mint — from brand palette */
  --green-300: #76c0a4;
  --green-400: #4aa183;
  --green-500: #1f6f5c;  /* PRIMARY — from brand palette */
  --green-600: #1a5d4d;
  --green-700: #15493d;
  --green-800: #0e3b30;  /* forest — from brand palette */
  --green-900: #082620;

  /* ---- Warm green-tinted neutrals ---- */
  --neutral-0:   #ffffff;
  --neutral-50:  #f7f9f8;
  --neutral-100: #eef2f0;
  --neutral-200: #dfe5e2;
  --neutral-300: #c5cecb;
  --neutral-400: #9aa6a2;
  --neutral-500: #6f7c78;
  --neutral-600: #515c59;
  --neutral-700: #3a4340;
  --neutral-800: #262d2b;
  --neutral-900: #161b1a;

  /* ---- Earth & sky accents (data viz, secondary CTAs) ---- */
  --clay-400:  #d98f6b;
  --clay-500:  #c4684a;   /* terracotta */
  --amber-400: #e0a64b;
  --amber-500: #cf8a2b;   /* harvest amber */
  --sky-400:   #5aa9d6;
  --sky-500:   #2f7db8;   /* water blue */
  --moss-500:  #7a8b3c;   /* dry moss */

  /* ---- Semantic raw ---- */
  --success-500: var(--green-500);
  --success-50:  var(--green-50);
  --warning-500: var(--amber-500);
  --warning-50:  #fcf4e4;
  --danger-500:  #c4503a;
  --danger-50:   #fbedea;
  --info-500:    var(--sky-500);
  --info-50:     #e9f3fa;

  /* ============ SEMANTIC ALIASES ============ */
  /* Text */
  --text-strong:   var(--neutral-900);
  --text-body:     var(--neutral-700);
  --text-muted:    var(--neutral-500);
  --text-subtle:   var(--neutral-400);
  --text-inverse:  var(--neutral-0);
  --text-brand:    var(--green-600);
  --text-on-brand: #ffffff;

  /* Surfaces */
  --surface-page:    var(--neutral-50);
  --surface-card:    var(--neutral-0);
  --surface-sunken:  var(--neutral-100);
  --surface-raised:  var(--neutral-0);
  --surface-brand:   var(--green-500);
  --surface-brand-subtle: var(--green-50);
  --surface-inverse: var(--green-900);

  /* Borders */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-brand:   var(--green-500);
  --border-focus:   var(--green-400);

  /* Interactive */
  --action-primary:        var(--green-500);
  --action-primary-hover:  var(--green-600);
  --action-primary-active: var(--green-700);
  --action-ghost-hover:    var(--green-50);

  /* Focus ring */
  --ring: 0 0 0 3px color-mix(in srgb, var(--green-400) 45%, transparent);

  /* Data-viz ordered series */
  --viz-1: var(--green-500);
  --viz-2: var(--sky-500);
  --viz-3: var(--amber-500);
  --viz-4: var(--clay-500);
  --viz-5: var(--green-300);
  --viz-6: var(--moss-500);
}