/* Elev8 Tech — Color Tokens */

:root {
  /* ── Brand primaries ── */
  --color-navy-900:   #0D1535;
  --color-navy-800:   #152049;
  --color-navy-700:   #1C2D6B;   /* ← primary brand navy */
  --color-navy-600:   #243580;
  --color-navy-500:   #2E4099;
  --color-navy-400:   #4558B2;
  --color-navy-300:   #6678C8;
  --color-navy-200:   #99A6DE;
  --color-navy-100:   #CDD3EF;
  --color-navy-50:    #EEF0F9;

  --color-teal-900:   #0E4F58;
  --color-teal-800:   #196978;
  --color-teal-700:   #2490A0;
  --color-teal-600:   #2EA8B8;
  --color-teal-500:   #4DC4D2;   /* ← primary brand teal */
  --color-teal-400:   #72D3DE;
  --color-teal-300:   #96DFE8;
  --color-teal-200:   #BFECF1;
  --color-teal-100:   #D9F4F7;
  --color-teal-50:    #EEF9FB;

  /* ── Neutrals ── */
  --color-neutral-950: #111827;
  --color-neutral-900: #1F2937;
  --color-neutral-800: #2A3147;
  --color-neutral-700: #454D63;
  --color-neutral-600: #6B7488;
  --color-neutral-500: #9AA2B4;
  --color-neutral-400: #C8CDD9;
  --color-neutral-300: #E2E6EF;
  --color-neutral-200: #F1F3F8;
  --color-neutral-100: #F8F9FC;
  --color-neutral-50:  #FFFFFF;

  /* ── Semantic ── */
  --color-success-700: #166534;
  --color-success-500: #22C55E;
  --color-success-100: #DCFCE7;

  --color-warning-700: #92400E;
  --color-warning-500: #F59E0B;
  --color-warning-100: #FEF3C7;

  --color-error-700:   #991B1B;
  --color-error-500:   #EF4444;
  --color-error-100:   #FEE2E2;

  --color-info-700:    #1E40AF;
  --color-info-500:    #3B82F6;
  --color-info-100:    #DBEAFE;

  /* ── Semantic aliases ── */
  --color-brand-primary:   var(--color-navy-700);
  --color-brand-accent:    var(--color-teal-500);
  --color-brand-dark:      var(--color-navy-900);

  --surface-page:          var(--color-neutral-50);
  --surface-subtle:        var(--color-neutral-100);
  --surface-card:          var(--color-neutral-50);
  --surface-overlay:       rgba(28, 45, 107, 0.08);
  --surface-invert:        var(--color-navy-700);

  --text-primary:          var(--color-neutral-950);
  --text-secondary:        var(--color-neutral-600);
  --text-tertiary:         var(--color-neutral-500);
  --text-disabled:         var(--color-neutral-400);
  --text-inverse:          var(--color-neutral-50);
  --text-link:             var(--color-navy-700);
  --text-link-hover:       var(--color-teal-600);

  --border-default:        var(--color-neutral-300);
  --border-subtle:         var(--color-neutral-200);
  --border-strong:         var(--color-neutral-400);
  --border-focus:          var(--color-teal-500);
  --border-brand:          var(--color-navy-700);
}