/* ============================================================
   4 You Design — Color Tokens
   ============================================================ */

:root {

  /* ── Blue Scale (Primary Brand) ── */
  --blue-950: #0D1340;
  --blue-900: #1B2470;   /* ★ Brand primary — dominant navy */
  --blue-800: #212D88;
  --blue-700: #2B3CA3;
  --blue-600: #3649BA;
  --blue-500: #4558C8;
  --blue-400: #6575D6;
  --blue-300: #8F9DE3;
  --blue-200: #BFC7F0;
  --blue-100: #E3E7FA;
  --blue-50:  #F0F2FD;

  /* ── Orange Scale (Accent / CTA) ── */
  --orange-700: #B83E0D;
  --orange-600: #D44C10;
  --orange-500: #EF5215;  /* ★ Brand accent — vibrant CTA orange */
  --orange-400: #F47445;
  --orange-300: #F89F7A;
  --orange-200: #FBC5AB;
  --orange-100: #FEE7DC;
  --orange-50:  #FFF4F0;

  /* ── Neutral Scale ── */
  --neutral-900: #111827;
  --neutral-800: #1F2937;
  --neutral-700: #374151;
  --neutral-600: #4B5563;
  --neutral-500: #6B7280;
  --neutral-400: #9CA3AF;
  --neutral-300: #D1D5DB;
  --neutral-200: #E5E7EB;
  --neutral-100: #F3F4F6;
  --neutral-50:  #F9FAFB;
  --white:       #FFFFFF;

  /* ── Semantic — Brand ── */
  --color-primary:       var(--blue-900);
  --color-primary-mid:   var(--blue-700);
  --color-primary-light: var(--blue-100);
  --color-accent:        var(--orange-500);
  --color-accent-dark:   var(--orange-600);
  --color-accent-light:  var(--orange-100);

  /* ── Semantic — Surfaces ── */
  --surface-bg:      var(--white);
  --surface-subtle:  var(--neutral-50);
  --surface-muted:   var(--neutral-100);
  --surface-dark:    var(--blue-900);
  --surface-darker:  var(--blue-950);
  --surface-accent:  var(--orange-500);
  --surface-card:    var(--white);

  /* ── Semantic — Text ── */
  --text-primary:   var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-muted:     var(--neutral-400);
  --text-on-dark:   var(--white);
  --text-accent:    var(--orange-500);
  --text-brand:     var(--blue-900);
  --text-link:      var(--blue-700);

  /* ── Semantic — Borders ── */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-brand:   var(--blue-700);
  --border-accent:  var(--orange-500);

  /* ── Status ── */
  --status-success-bg:   #DCFCE7;
  --status-success-text: #166534;
  --status-success-border: #BBF7D0;
  --status-warning-bg:   #FEF9C3;
  --status-warning-text: #854D0E;
  --status-warning-border: #FEF08A;
  --status-error-bg:     #FEE2E2;
  --status-error-text:   #991B1B;
  --status-error-border: #FECACA;
  --status-info-bg:      var(--blue-100);
  --status-info-text:    var(--blue-900);
  --status-info-border:  var(--blue-200);
}