/* ===========================================================================
   DESATA · COLOR TOKENS
   Electric-yellow + ink. High-contrast, confident, agency energy.
   Base palette -> semantic aliases. Always cite tokens, never raw hex.
   =========================================================================== */
:root {
  /* --- Brand core --- */
  --desata-yellow:        #F0FF3D; /* the signal. electric lime-yellow */
  --desata-yellow-bright: #F6FF73; /* hover lift on dark */
  --desata-yellow-deep:   #D2E600; /* pressed / yellow-on-yellow text */
  --desata-ink:           #1A1A1A; /* near-black. the default dark */
  --desata-black:         #000000;
  --desata-white:         #FFFFFF;

  /* --- Neutrals (warm-cool balanced grey ramp) --- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F7F7F4; /* off-white page surface */
  --neutral-100: #EFEFEA;
  --neutral-200: #E2E2DC;
  --neutral-300: #CBCBC4;
  --neutral-400: #A6A6A0;
  --neutral-500: #82827C;
  --neutral-600: #5E5E59;
  --neutral-700: #3F3F3B;
  --neutral-800: #2A2A28;
  --neutral-900: #1A1A1A;
  --neutral-950: #111110;

  /* --- Semantic status (used sparingly; yellow owns the brand) --- */
  --green-500:  #1F9D55;
  --green-100:  #DBF3E5;
  --red-500:    #E0341D;
  --red-100:    #FBE0DB;
  --blue-500:   #2B6CF0;
  --blue-100:   #DEE9FE;
  --amber-500:  #F2A516;

  /* =====================================================================
     SEMANTIC ALIASES — reach for these in product/components
     ===================================================================== */
  /* Brand */
  --brand:               var(--desata-yellow);
  --brand-hover:         var(--desata-yellow-bright);
  --brand-active:        var(--desata-yellow-deep);
  --on-brand:            var(--desata-ink);     /* text/icons on yellow */

  /* Text */
  --text-strong:         var(--desata-ink);
  --text-body:           var(--neutral-700);
  --text-muted:          var(--neutral-500);
  --text-on-dark:        var(--neutral-0);
  --text-on-dark-muted:  var(--neutral-400);
  --text-on-brand:       var(--desata-ink);

  /* Surfaces */
  --surface-page:        var(--neutral-50);
  --surface-card:        var(--neutral-0);
  --surface-sunken:      var(--neutral-100);
  --surface-dark:        var(--desata-ink);
  --surface-dark-raised: var(--neutral-800);
  --surface-brand:       var(--desata-yellow);
  --surface-inverse:     var(--desata-ink);

  /* Borders / lines */
  --border-subtle:       var(--neutral-200);
  --border-default:      var(--neutral-300);
  --border-strong:       var(--desata-ink);
  --border-on-dark:      rgba(255,255,255,0.14);

  /* Focus */
  --focus-ring:          var(--desata-ink);
  --focus-ring-on-dark:  var(--desata-yellow);
}