/* ──────────────────────────────────────────────────────────────
   Kinetika — Color tokens
   Derived from the Kinetika Solutions logo: warm copper gradient,
   pewter/taupe gray, deep warm charcoal, white-dominant canvas.
   ────────────────────────────────────────────────────────────── */
:root {
  /* ── Copper — the warm premium orange (logo gradient) ───────── */
  --copper-900: #5b2a0c;   /* deepest burnt edge      */
  --copper-800: #7a3a10;
  --copper-700: #97491a;
  --copper-600: #b05a1f;
  --copper-500: #c2671f;   /* PRIMARY brand copper    */
  --copper-400: #d07d33;
  --copper-300: #e09a4f;   /* highlight / gradient top */
  --copper-200: #efba7e;
  --copper-100: #f7ddc2;
  --copper-50:  #fcf2e8;   /* tint wash               */

  /* Signature copper gradient (mark, accents, rules) */
  --copper-gradient: linear-gradient(135deg, #e09a4f 0%, #c2671f 45%, #7a3a10 100%); /* @kind color */
  --copper-gradient-v: linear-gradient(180deg, #e09a4f 0%, #b05a1f 60%, #5b2a0c 100%); /* @kind color */

  /* ── Pewter — warm taupe gray (the KINETIKA wordmark) ───────── */
  --pewter-900: #2b2422;
  --pewter-800: #3d3633;
  --pewter-700: #544945;
  --pewter-600: #6b5f5a;    /* wordmark pewter         */
  --pewter-500: #847972;
  --pewter-400: #a39a94;
  --pewter-300: #c4bcb6;
  --pewter-200: #ddd6d1;
  --pewter-100: #ece8e4;
  --pewter-50:  #f5f3f1;

  /* ── Ink — warm near-black (dark slides, road) ─────────────── */
  --ink-900: #14100e;   /* deepest — dark slide bg  */
  --ink-800: #1d1815;
  --ink-700: #2a2320;

  /* ── Canvas — white & off-whites (the dominant surface) ────── */
  --white:     #ffffff;
  --paper:     #fbfaf9;   /* faint warm paper         */
  --paper-2:   #f6f4f2;   /* sectioned panel          */

  /* ── Functional ─────────────────────────────────────────────── */
  --success: #4f7a45;
  --warning: #c2671f;     /* uses copper — single accent system */
  --danger:  #9c3a2c;
  --info:    #5a6b78;

  /* ══════════ Semantic aliases ══════════ */
  --bg-canvas:        var(--white);
  --bg-paper:         var(--paper);
  --bg-panel:         var(--paper-2);
  --bg-inverse:       var(--ink-900);
  --bg-wash:          var(--copper-50);

  --text-primary:     var(--pewter-900);
  --text-body:        var(--pewter-700);
  --text-secondary:   var(--pewter-600);
  --text-muted:       var(--pewter-400);
  --text-accent:      var(--copper-500);
  --text-on-inverse:  #f3efec;
  --text-on-copper:   #ffffff;

  --accent:           var(--copper-500);
  --accent-strong:    var(--copper-700);
  --accent-soft:      var(--copper-100);

  --border-hairline:  var(--pewter-200);
  --border-strong:    var(--pewter-300);
  --border-inverse:   rgba(255,255,255,0.14);
  --rule-accent:      var(--copper-500);

  --surface-card:     var(--white);
  --surface-card-inverse: var(--ink-800);
}