:root{
  /* ============ BRAND RAMPS ============
     Anchored on three colours that exist in the RedPlum wheel mark:
     amber #F3AA03, wheel red #C02030, plum #8C1B2F. */

  --amber-50:  #FFFAEB;
  --amber-100: #FEF0C7;
  --amber-200: #FCDF8A;
  --amber-300: #F9C74C;
  --amber-400: #F3AA03;   /* the brand amber, pixel-sampled */
  --amber-500: #D18E00;
  --amber-600: #A87100;
  --amber-700: #8A5A00;   /* lowest amber that reads as text on white (5.9:1) */
  --amber-800: #5E3D00;
  --amber-900: #3B2600;

  --red-50:  #FFF1F1;
  --red-100: #FFDEDE;
  --red-200: #FCBABA;
  --red-300: #F28C8C;
  --red-400: #DE4A4A;
  --red-500: #C02030;    /* wheel red - the primary action colour (6.0:1) */
  --red-600: #A3182A;
  --red-700: #8C1B2F;    /* plum, the deep end of the same family (9.1:1) */
  --red-800: #6B1223;
  --red-900: #40080F;

  --blue-400: #2A46C8;
  --blue-500: #1028A0;   /* wheel blue - informational only */
  --blue-600: #0B1D78;

  /* ============ WARM NEUTRALS ============
     Slightly warm so they sit under amber and red without going grey-blue. */
  --n-0:   #FFFFFF;
  --n-25:  #FAF9F7;
  --n-50:  #F5F3F0;
  --n-100: #EBE8E3;
  --n-200: #DDD9D2;
  --n-300: #C4BFB6;
  --n-400: #9C968C;
  --n-500: #6E6862;   /* 5.5:1 on white */
  --n-600: #524D48;   /* 8.3:1 */
  --n-700: #3A3631;
  --n-800: #26231F;
  --n-900: #14120F;   /* ink */

  /* ============ TEXT ============ every value below is ≥ 4.5:1 on its surface */
  --text-primary:    var(--n-900);
  --text-secondary:  var(--n-600);
  --text-tertiary:   var(--n-500);
  --text-accent:     var(--amber-700);   /* amber as TEXT only at 700 */
  --text-brand:      var(--red-500);
  --text-on-dark:    var(--n-0);
  --text-on-dark-dim: rgba(255,255,255,.76);
  --text-on-amber:   var(--n-900);       /* 9.5:1 - never white on amber */
  --text-on-brand:   var(--n-0);
  --text-disabled:   var(--n-400);

  /* ============ SURFACES ============ */
  --surface-page:    var(--n-0);
  --surface-subtle:  var(--n-25);
  --surface-sunken:  var(--n-50);
  --surface-raised:  var(--n-0);
  --surface-inverse: var(--n-900);
  --surface-inverse-2: var(--n-800);
  --surface-brand:   var(--red-500);
  --surface-brand-deep: var(--red-700);
  --surface-accent:  var(--amber-400);
  --surface-accent-soft: var(--amber-50);
  --surface-hover:   var(--n-50);
  --surface-media:   var(--n-100);   /* behind product renders */

  /* ============ BORDERS ============ */
  --border-subtle:  var(--n-100);
  --border-default: var(--n-200);
  --border-strong:  var(--n-300);
  --border-inverse: rgba(255,255,255,.16);
  --border-accent:  var(--amber-400);
  --border-brand:   var(--red-500);
  --focus-ring:     var(--n-900);
  --focus-ring-inverse: var(--n-0);

  /* ============ ACTIONS ============ */
  --action-primary:        var(--red-500);
  --action-primary-hover:  var(--red-600);
  --action-primary-active: var(--red-700);
  --action-accent:         var(--amber-400);
  --action-accent-hover:   var(--amber-300);
  --action-accent-active:  var(--amber-500);
  --action-neutral:        var(--n-900);
  --action-neutral-hover:  var(--n-700);
  --action-ghost-hover:    var(--n-50);

  /* ============ STATUS ============ */
  --status-success: #17703F;
  --status-success-soft: #E8F5EC;
  --status-warning: var(--amber-700);
  --status-warning-soft: var(--amber-50);
  --status-danger:  #B01B12;
  --status-danger-soft: var(--red-50);
  --status-info:    var(--blue-500);
  --status-info-soft: #EEF1FD;

  /* ============ SIGNATURE ============
     One gradient in the whole system. Dark on the left so text always
     sits on the plum end; pair it with --scrim-signature and keep copy
     inside the left 60%. */
  --gradient-signature: linear-gradient(100deg, #2A0A10 0%, #6E1522 26%, #A81C28 52%, #D4491A 76%, var(--amber-400) 100%);
  --gradient-ink: linear-gradient(180deg, var(--n-900) 0%, #1F1C18 100%);
  --scrim-signature: linear-gradient(90deg, rgba(18,6,8,.74) 0%, rgba(18,6,8,.38) 54%, rgba(18,6,8,0) 80%); /* @kind color */
  --scrim-media: linear-gradient(180deg, rgba(20,18,15,0) 34%, rgba(20,18,15,.78) 100%); /* @kind color */
}