/* ============================================================
   Genesis · Color tokens
   Base palette + semantic aliases.
   Do NOT use pure #000 / #fff for text — use the values below.
   ============================================================ */

:root {
  /* ---- Base palette ---- */
  --indigo-500: #6366F1;   /* primary */
  --indigo-600: #4F46E5;   /* primary hover */
  --indigo-050: #EEF0FF;   /* tint for chips / active backgrounds */

  --green-brand: #20970B;  /* reserved: DESIGN.md homepage highlight ONLY */

  --gray-950: #0A0A0A;     /* text primary (near-black) */
  --gray-600: #6B6B6B;     /* text secondary */
  --gray-500: #9C9C9C;     /* neutral / muted / placeholder / disabled */
  --gray-100: #F1F1F3;     /* chip background */
  --gray-050: #FAFAFA;     /* page background (warm light gray) */
  --white:     #FFFFFF;    /* surface */

  --border-subtle: #E8E8EC;

  --success-500: #10B981;
  --warning-500: #F59E0B;
  --error-500:   #EF4444;

  /* Semantic tints (used for status chip fills) */
  --success-tint: #E7F7F1;
  --warning-tint: #FDF3E0;
  --error-tint:   #FCE9E9;

  /* ---- Semantic aliases ---- */
  --color-primary:        var(--indigo-500);
  --color-primary-hover:  var(--indigo-600);
  --color-secondary:      var(--green-brand);

  --bg-page:              var(--gray-050);
  --surface-card:         var(--white);
  --surface-alt:          var(--gray-100);

  --text-primary:         var(--gray-950);
  --text-secondary:       var(--gray-600);
  --text-muted:           var(--gray-500);
  --text-on-primary:      var(--white);

  --border-default:       var(--border-subtle);

  --status-published:     var(--success-500);
  --status-pending:       var(--warning-500);
  --status-rejected:      var(--error-500);

  /* Focus ring — 3px indigo at 12% */
  --ring-focus:           0 0 0 3px rgba(99, 102, 241, 0.12);
}