/* ============================================================
   UPLIFT — Color tokens
   Brand: "uplift by Serge Alleyne" — a longevity/health letter.
   Warm paper neutrals + a hot brand orange + muted moss green.
   Base scales first, then semantic aliases.
   ============================================================ */

:root {
  /* ---- Paper / warm neutrals (the brand's signature cream) ---- */
  --paper-50:  #FEFDFC;
  --paper-100: #FCFBF7;
  --paper-200: #FAF6F0;   /* header / hero surface */
  --paper-300: #F8F5EF;   /* DEFAULT page background */
  --paper-400: #F2EDE2;
  --paper-500: #E9E2D2;
  --paper-600: #DDD3BE;   /* hairline / card border on cream */
  --paper-700: #BEBAB0;
  --paper-800: #97948C;
  --paper-900: #6F6C67;
  --paper-950: #494744;

  /* ---- Ink (warm near-black — text & the wordmark) ---- */
  --ink-900: #16170F;
  --ink-800: #21231E;     /* DEFAULT body ink */
  --ink-700: #2C2E29;
  --ink-600: #3E403A;
  --ink-500: #5C5E57;
  --ink-400: #7A7C74;     /* muted / secondary text */
  --ink-300: #9C9D96;
  --ink-200: #C4C5BF;

  /* ---- Orange (brand primary / accent) ---- */
  --orange-50:  #FFF4EC;
  --orange-100: #FFE4D2;
  --orange-200: #FFC5A3;
  --orange-300: #FF9F6B;
  --orange-400: #FE7E33;
  --orange-500: #FE6500;   /* BRAND orange (wordmark crossbar, CTAs) */
  --orange-600: #EA5800;   /* hover */
  --orange-700: #C24812;   /* pressed */
  --orange-800: #8F3A0A;
  --orange-900: #6B2D0C;
  --orange-950: #431407;

  /* ---- Moss (muted green — secondary / vitality / success) ---- */
  --moss-50:  #F1F5EE;
  --moss-100: #DFE8D5;
  --moss-200: #C2D2B0;
  --moss-300: #9FB888;
  --moss-400: #7C9A62;
  --moss-500: #5E7D46;
  --moss-600: #46A269;     /* bright vitality green (bento gradient end) */
  --moss-700: #2F5A2A;
  --moss-800: #1C4316;
  --moss-900: #0E2A0F;

  /* ---- Clay (earthy warm brown — illustration tint / tertiary) ---- */
  --clay-100: #EFE3D8;
  --clay-300: #D2B69E;
  --clay-500: #A07A5C;
  --clay-700: #703D29;
  --clay-900: #452C25;

  /* ---- Pure ---- */
  --white: #FFFFFF;
  --black: #000000;

  /* ---- Status (kept warm / desaturated to sit on cream) ---- */
  --danger: #DC2626;
  --danger-bg: #FEECEC;
  --warning: #E2A30E;
  --warning-bg: #FCF3DC;
  --success: var(--moss-600);
  --success-bg: var(--moss-50);
  --info: #17C0EB;

  /* ============================================================
     SEMANTIC ALIASES — reference these in components / kits
     ============================================================ */

  /* Surfaces */
  --surface-page:      var(--paper-300);
  --surface-raised:    var(--paper-200);
  --surface-card:      var(--white);
  --surface-sunken:    var(--paper-400);
  --surface-inverse:   var(--ink-800);
  --surface-brand:     var(--orange-500);

  /* Text */
  --text-strong:    var(--ink-900);
  --text-body:      var(--ink-800);
  --text-muted:     var(--ink-400);
  --text-faint:     var(--ink-300);
  --text-on-brand:  var(--white);
  --text-on-ink:    var(--paper-200);
  --text-brand:     var(--orange-500);
  --text-link:      var(--orange-600);

  /* Borders / lines */
  --border-subtle:  var(--paper-600);
  --border-strong:  var(--ink-800);
  --border-brand:   var(--orange-500);
  --hairline:       color-mix(in srgb, var(--ink-800) 12%, transparent);

  /* Interactive (orange button) */
  --action-bg:         var(--orange-500);
  --action-bg-hover:   var(--orange-600);
  --action-bg-active:  var(--orange-700);
  --action-fg:         var(--white);

  /* Interactive (ink/solid button) */
  --action-ink-bg:        var(--ink-800);
  --action-ink-bg-hover:  var(--ink-900);
  --action-ink-fg:        var(--paper-200);

  /* Focus ring */
  --focus-ring: color-mix(in srgb, var(--orange-500) 55%, transparent);
}