/* Koon Automatic — color tokens */
:root{
  /* Brand */
  --koon-orange:#F47C20;        /* primary accent */
  --koon-orange-hover:#DA6B14;  /* darker accent for hover */
  --koon-orange-active:#C25E0F; /* pressed accent */
  --koon-orange-soft:#FDECDF;   /* tinted accent surface */
  --koon-cement:#4C4C4C;        /* base cement gray */
  --koon-cement-dark:#3A3A3A;   /* deeper cement */

  /* Neutrals */
  --white:#FFFFFF;
  --gray-50:#F8F8F8;
  --gray-100:#F2F2F2;           /* light gray surface */
  --gray-200:#E6E6E6;
  --gray-300:#D5D5D5;
  --gray-400:#B3B3B3;
  --gray-500:#8A8A8A;
  --gray-600:#666666;
  --gray-700:#4C4C4C;
  --gray-900:#1A1A1A;           /* text */

  /* Semantic */
  --success:#2E9E5B;
  --success-soft:#E4F4EA;
  --warning:#E6A100;
  --warning-soft:#FBF1D6;
  --danger:#D23B2E;
  --danger-soft:#FBE6E4;
  --info:#2F6FB3;
  --info-soft:#E4EEF7;

  /* Semantic aliases */
  --accent:var(--koon-orange);
  --accent-hover:var(--koon-orange-hover);
  --accent-active:var(--koon-orange-active);
  --accent-soft:var(--koon-orange-soft);

  --bg-page:var(--white);
  --bg-subtle:var(--gray-100);
  --surface-card:var(--white);
  --surface-raised:var(--white);

  --text-strong:var(--gray-900);
  --text-body:#333333;
  --text-muted:var(--gray-600);
  --text-on-accent:var(--white);
  --text-on-dark:var(--white);

  --border-subtle:var(--gray-200);
  --border-default:var(--gray-300);
  --border-strong:var(--gray-400);
  --focus-ring:rgba(244,124,32,0.35);
}