/* Handled Design System — Color Tokens */

:root {
  /* ── Cream Scale ── */
  --cream-50:  #FDFCFA;
  --cream-100: #FAF8F4;   /* ★ primary background */
  --cream-200: #F3EFE7;
  --cream-300: #E5DDD4;   /* borders on cream */

  /* ── Steel Scale (primary accent) ── */
  --steel-100: #E3EFF5;
  --steel-300: #8BB4CC;
  --steel-400: #4A8FAE;
  --steel-500: #3A6D8E;   /* ★ primary accent */
  --steel-700: #245270;
  --steel-900: #132E42;   /* dark backgrounds */

  /* ── Ink Scale ── */
  --ink-100:   #D9D4CE;
  --ink-300:   #A09A94;   /* muted text */
  --ink-500:   #6B6660;   /* secondary text */
  --ink-700:   #3D3A34;
  --ink-900:   #1C1A17;   /* ★ primary text */

  /* ── Semantic — Surfaces ── */
  --color-bg:            var(--cream-100);
  --color-bg-subtle:     var(--cream-200);
  --color-bg-dark:       var(--steel-900);
  --color-surface:       var(--cream-50);
  --color-surface-inset: var(--cream-200);

  /* ── Semantic — Text ── */
  --color-text:           var(--ink-900);
  --color-text-secondary: var(--ink-700);
  --color-text-subtle:    var(--ink-500);
  --color-text-muted:     var(--ink-300);
  --color-text-inverse:   var(--cream-100);
  --color-text-accent:    var(--steel-500);
  --color-text-accent-dk: var(--steel-700);
  --color-text-on-dark:   var(--steel-400);

  /* ── Semantic — Accent ── */
  --color-accent:         var(--steel-500);
  --color-accent-hover:   var(--steel-700);
  --color-accent-light:   var(--steel-100);
  --color-accent-mid:     var(--steel-300);

  /* ── Semantic — Borders ── */
  --color-border:         var(--cream-300);
  --color-border-subtle:  rgba(58,109,142,0.18);
  --color-border-accent:  var(--steel-500);
  --color-border-dark:    rgba(58,109,142,0.3);

  /* ── Semantic — Status ── */
  --color-positive:       #2E7D55;
  --color-positive-bg:    #E8F5EE;
  --color-warning:        #9A6B00;
  --color-warning-bg:     #FEF7E0;
  --color-negative:       #B03737;
  --color-negative-bg:    #FDEAEA;
  --color-neutral:        var(--ink-500);
  --color-neutral-bg:     var(--cream-200);
}