/* ============================================================
   KORMIK OS — DESIGN TOKENS
   One system, two themes. Orange is the single hero accent.
   ============================================================ */
:root {
  /* Brand accent — slightly deepened for dark surfaces (per brand book) */
  --o-50:  #FFF0E5;
  --o-100: #FFD9BF;
  --o-200: #FFB382;
  --o-300: #FF8C45;
  --o-400: #FF7322;
  --o-500: #FF6B00;   /* canonical KORMIK ORANGE */
  --o-600: #E55D00;   /* the working orange used on dark */
  --o-700: #BF4D00;
  --o-800: #8C3800;

  /* Status (meaning preserved across themes) */
  --green:  #27AE60;
  --green-2:#21934E;
  --green-s:rgba(39,174,96,.14);
  --red:    #E74C3C;
  --red-s:  rgba(231,76,60,.14);
  --amber:  #E0A015;
  --amber-s:rgba(224,160,21,.16);
  --blue:   #3878DA;
  --blue-s: rgba(56,120,218,.13);

  /* Geometry */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* Motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, .84, .34, 1);
  --t-fast: .14s;
  --t: .22s;
  --t-slow: .38s;

  /* Type */
  --f-display: 'Inter', system-ui, sans-serif;
  --f-body:    'Inter', system-ui, sans-serif;
  --f-num:     'Chakra Petch', 'Inter', sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, monospace;
  --f-bn:      'Hind Siliguri', 'Inter', sans-serif;
}

/* DARK (default) — warm near-black with subtle orange tint */
:root[data-theme="dark"] {
  --bg:        #0A0A10;
  --bg-elev-1: #11121A;
  --bg-elev-2: #181924;
  --bg-elev-3: #1F2130;
  --bg-input:  #0E0F18;
  --bg-bar:    rgba(10, 10, 16, .82);

  --ink:       #F2F2F6;
  --ink-2:     #B6BAC8;
  --ink-3:     #7C8093;
  --ink-4:     #4B4F5E;
  --ink-5:     #2C2F3C;

  --rule:      rgba(255, 255, 255, .07);
  --rule-2:    rgba(255, 255, 255, .04);
  --rule-strong: rgba(255, 255, 255, .14);

  --accent:    var(--o-600);
  --accent-2:  var(--o-500);
  --accent-soft: rgba(255, 107, 0, .14);
  --accent-glow: 0 8px 28px rgba(255, 107, 0, .35);
  --accent-ink:  #FFFFFF;

  --shadow:    0 22px 60px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.4);
  --shadow-sm: 0 4px 16px rgba(0,0,0,.35);

  /* The "grain" overlay used to give surfaces a tactile, infrastructural feel */
  --noise: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMjAwIDIwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIGJhc2VGcmVxdWVuY3k9Jy45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPScwIDAgMCAwIDAgIDAgMCAwIDAgMCAgMCAwIDAgMCAwICAwIDAgMCAuMzUgMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScgb3BhY2l0eT0nLjU1Jy8+PC9zdmc+");
}

/* LIGHT — Warm Off-White anchored, Deep Navy ink */
:root[data-theme="light"] {
  --bg:        #FFF8F3;          /* brand warm off-white */
  --bg-elev-1: #FFFFFF;
  --bg-elev-2: #FBF3EC;
  --bg-elev-3: #F2E9E0;
  --bg-input:  #FFFFFF;
  --bg-bar:    rgba(255, 248, 243, .88);

  --ink:       #1A1A2E;          /* brand deep navy */
  --ink-2:     #555555;          /* brand warm gray */
  --ink-3:     #7E7E8F;
  --ink-4:     #B6B6C2;
  --ink-5:     #E2DACF;

  --rule:      rgba(26, 26, 46, .10);
  --rule-2:    rgba(26, 26, 46, .05);
  --rule-strong: rgba(26, 26, 46, .18);

  --accent:    var(--o-500);
  --accent-2:  var(--o-600);
  --accent-soft: rgba(255, 107, 0, .12);
  --accent-glow: 0 6px 22px rgba(255, 107, 0, .28);
  --accent-ink:  #FFFFFF;

  --shadow:    0 12px 36px rgba(40, 30, 20, .12), 0 2px 6px rgba(40, 30, 20, .06);
  --shadow-sm: 0 3px 10px rgba(40, 30, 20, .08);

  --noise: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMjAwIDIwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIGJhc2VGcmVxdWVuY3k9Jy45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPScwIDAgMCAwIDAgIDAgMCAwIDAgMCAgMCAwIDAgMCAwICAwIDAgMCAuMTQgMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==");
}