/* ============================================================
   KDN · COLOR TOKENS
   Identity = dark premium base + vibrant orange accent + clean light.
   Proportion rule: 60% dark · 30% light · 10% orange.
   ============================================================ */

:root {
  /* ---- Brand core (from the brand guide) ---- */
  --kdn-black:  #212322;   /* Pantone 419C · primary surface */
  --kdn-orange: #FF5100;   /* Pantone Orange 021C · accent   */
  --kdn-light:  #F6F7F8;   /* clean light surface            */
  --kdn-white:  #FFFFFF;

  /* ---- Orange ramp (tint → shade) ---- */
  --orange-50:  #FFEEE6;
  --orange-100: #FFDCCC;
  --orange-200: #FFCBB3;
  --orange-300: #FFB999;
  --orange-400: #FF9766;
  --orange-500: #FF7433;
  --orange-600: #FF5100;   /* = --kdn-orange */
  --orange-700: #CC4100;
  --orange-800: #993100;
  --orange-900: #662000;
  --orange-950: #331000;

  /* ---- Neutral / charcoal ramp ---- */
  --ink-50:  #B4B8B6;
  --ink-100: #A5A9A7;
  --ink-200: #979A98;
  --ink-300: #888B8A;
  --ink-400: #797C7B;
  --ink-500: #5C5F5D;
  --ink-600: #3E4140;
  --ink-700: #212322;   /* = --kdn-black */
  --ink-800: #1A1C1B;
  --ink-900: #141514;
  --ink-950: #0A0B0A;

  /* ---- Light / off-white ramp ---- */
  --paper-0:   #FFFFFF;
  --paper-50:  #FDFDFE;
  --paper-100: #FCFDFD;
  --paper-200: #FBFCFC;
  --paper-300: #F8F9F9;
  --paper-400: #F6F7F8;   /* = --kdn-light */
  --paper-500: #D6D9DD;
  --paper-600: #B6BCC1;

  /* ---- Semantic: surfaces ---- */
  --surface-base:      var(--kdn-black);    /* default premium dark canvas */
  --surface-raised:    var(--ink-800);      /* cards on dark               */
  --surface-sunken:    var(--ink-900);
  --surface-light:     var(--kdn-light);    /* light-mode canvas           */
  --surface-card:      var(--kdn-white);    /* cards on light              */
  --surface-inverse:   var(--kdn-white);

  /* ---- Semantic: text ---- */
  --text-on-dark:      var(--kdn-white);
  --text-on-dark-soft: var(--ink-50);
  --text-on-dark-mute: var(--ink-200);
  --text-on-light:     var(--kdn-black);
  --text-on-light-soft:var(--ink-500);
  --text-accent:       var(--kdn-orange);
  --text-on-accent:    var(--kdn-white);

  /* ---- Semantic: lines & accents ---- */
  --border-on-dark:   rgba(255,255,255,0.10);
  --border-on-light:  rgba(33,35,34,0.10);
  --border-strong:    var(--kdn-black);
  --accent:           var(--kdn-orange);
  --accent-hover:     var(--orange-700);
  --accent-press:     var(--orange-800);
  --accent-soft:      var(--orange-50);
  --focus-ring:       var(--orange-300);

  /* ---- Semantic: status ---- */
  --success: #1F8A5B;
  --danger:  #E03A2F;
  --info:    #2A6FDB;
}