/* ============================================================
   PAMPLEMOUSSE — COLOR TOKENS
   Duotone grapefruit palette: engraved black, cream paper,
   grapefruit red, grove green. Dark-dominant brand.
   ============================================================ */
:root {
  /* ---- Brand core (from style cards) ---- */
  --grapefruit-500: #FF5C4D;   /* primary red — flesh / CTA */
  --grapefruit-600: #E53E2F;   /* deep red — pressed / rind */
  --grapefruit-400: #FF7A64;   /* coral — hover glow / secondary */
  --grapefruit-300: #FFB3A3;   /* pale coral — tint / disabled-on-red */
  --grapefruit-200: #FBD3C9;   /* wash — subtle red surface tint */

  --grove-700: #2E3726;        /* deep grove green — leaf shadow */
  --grove-500: #4B5E3B;        /* grove green — secondary category */
  --grove-300: #7C8C63;        /* lit foliage — derived, muted accents */

  /* ---- Ink ramp (near-black engraving) ---- */
  --ink-900: #0B0B0B;          /* base canvas */
  --ink-850: #111110;
  --ink-800: #16150F;
  --ink-750: #1B1A15;
  --ink-700: #22201A;
  --ink-600: #2C2A22;
  --ink-500: #3A362D;
  --ink-400: #4E4940;          /* hairline borders on dark */
  --ink-300: #6B655A;          /* muted text on dark */

  /* ---- Paper ramp (cream) ---- */
  --paper-0:   #FFFFFF;
  --paper-50:  #FAF7F5;
  --paper-100: #F6F3EF;        /* primary cream surface */
  --paper-200: #ECE7DE;
  --paper-300: #DCD5C8;        /* hairline borders on cream */
  --paper-400: #C3BAA8;

  /* ---- Derived semantic hues (warm-palette harmonized) ---- */
  --amber-500: #D9911F;        /* at-risk / caution / waiting — DERIVED, see readme */
  --gold-500: #C9A227;         /* ready-for-review — DERIVED, distinct from amber */
  --amber-tint: #4a3a1c;
  --emerald-500: #5C8C4F;      /* healthy / done — DERIVED from grove */

  /* ============================================================
     SEMANTIC ALIASES — DARK (default app + brand surfaces)
     ============================================================ */
  --bg-canvas:      var(--ink-900);
  --bg-surface:     var(--ink-850);   /* cards / panels */
  --bg-surface-2:   var(--ink-750);   /* raised / nested */
  --bg-surface-3:   var(--ink-700);   /* hover rows / inputs */
  --bg-inset:       var(--ink-800);

  --border-hairline: var(--ink-400);
  --border-strong:   var(--ink-300);

  --text-primary:   var(--paper-100);
  --text-secondary: #B7AFA2;
  --text-muted:     var(--ink-300);
  --text-inverse:   var(--ink-900);

  --accent:         var(--grapefruit-500);
  --accent-hover:   var(--grapefruit-400);
  --accent-press:   var(--grapefruit-600);
  --accent-quiet:   var(--grapefruit-200);
  --on-accent:      #1A0906;          /* text on solid red */

  --focus-ring:     var(--grapefruit-400);

  /* ---- status (record health / task state) ---- */
  --status-ontrack:   var(--emerald-500);
  --status-atrisk:    var(--amber-500);
  --status-blocked:   var(--grapefruit-600);
  --status-done:      var(--grove-300);
  --status-idle:      var(--ink-300);

  /* ---- priority ---- */
  --prio-high:   var(--grapefruit-500);
  --prio-med:    var(--amber-500);
  --prio-low:    var(--grove-300);

  /* ---- mode accents ---- */
  --mode-work:   var(--grapefruit-500);
  --mode-life:   var(--grove-300);
}

/* ============================================================
   LIGHT / PAPER SCOPE — for cream marketing sections & docs.
   Apply class="paper" on a container to flip the semantics.
   ============================================================ */
.paper {
  --bg-canvas:      var(--paper-100);
  --bg-surface:     var(--paper-0);
  --bg-surface-2:   var(--paper-50);
  --bg-surface-3:   var(--paper-200);
  --bg-inset:       var(--paper-50);

  --border-hairline: var(--paper-300);
  --border-strong:   var(--paper-400);

  --text-primary:   var(--ink-900);
  --text-secondary: #4A443B;
  --text-muted:     #857C6E;
  --text-inverse:   var(--paper-100);

  --on-accent:      #1A0906;
}