/* Sauli AI – värit. Lähde: DS-handoff.md + Sauli ilme – suunnat (07 Väripaletti).
   Perusvärit ovat brändinimillä, roolit (--color-ink, --color-line …) noudattavat
   repon web/src/ui/theme.css -nimeämistä, jotta ne voi siirtää Tailwindin @themeen. */
:root {
  /* Pää- ja tukivärit */
  --color-hiili-900: #1D1A16;
  --color-hiili-700: #3A352E;
  --color-voi: #F2CF66;
  --color-kerma: #F5EFE3;
  --color-ruska: #FA6A3C; /* vain brändipinnoilla, hiilen värinen sisältö päällä; ei tekstiä, ei tiloja */
  /* Neutraalit */
  --color-kivi-500: #6B645A;
  --color-kivi-300: #D3CABB;
  --color-kivi-200: #E7E0D3;
  --color-kivi-100: #F3EDE2;
  --color-kivi-50: #FAF6EE;
  --color-paperi: #FFFDF9;
  /* Tilavärit */
  --color-virhe-600: #B42318;
  --color-virhe-200: #EDBDB9; /* johdettu: 20 % 600 → 100 */
  --color-virhe-100: #FBE4E1;
  --color-tarkistettava-900: #5E3A00;
  --color-tarkistettava-700: #8A5300;
  --color-tarkistettava-500: #F0A524;
  --color-tarkistettava-200: #F0D59C;
  --color-tarkistettava-100: #FDF3DF;
  --color-onnistui-600: #23794A;
  --color-onnistui-200: #BDD9C8; /* johdettu */
  --color-onnistui-100: #E4F1E8;
  --color-info-600: #2D5EA6;
  --color-info-200: #BFCFE6; /* johdettu */
  --color-info-100: #E4EBF6;

  /* Roolit: teksti */
  --color-ink: var(--color-hiili-900);
  --color-label: var(--color-hiili-700);
  --color-muted: var(--color-kivi-500);
  --color-link: var(--color-hiili-900);
  --color-link-hover: #000;
  /* Roolit: pinnat */
  --color-bg: var(--color-paperi);
  --color-surface: var(--color-kivi-50);
  --color-surface-2: var(--color-kivi-100);
  --color-surface-hover: var(--color-kivi-200);
  --color-selected: var(--color-kivi-100);
  --color-highlight: var(--color-voi);
  --color-backdrop: rgba(29, 26, 22, .32);
  /* Roolit: reunat */
  --color-line: var(--color-kivi-200);
  --color-control: var(--color-kivi-300);
  --color-control-hover: var(--color-kivi-500);
  --color-selected-line: var(--color-hiili-900);
  --color-focus: var(--color-info-600);
  --color-focus-ring: var(--color-info-100);
  /* Roolit: toiminnot */
  --color-primary: var(--color-hiili-900);
  --color-primary-hover: var(--color-hiili-700);
  --color-on-primary: var(--color-kerma);
  --color-toast-bg: var(--color-hiili-900);
  --color-toast-ink: var(--color-kerma);
  /* Roolit: tilat (aina symboli + teksti, ei pelkkä väri) */
  --color-danger: var(--color-virhe-600);
  --color-danger-bg: var(--color-virhe-100);
  --color-danger-line: var(--color-virhe-200);
  --color-warning: var(--color-tarkistettava-700);
  --color-warning-ink-2: var(--color-tarkistettava-900);
  --color-warning-fill: var(--color-tarkistettava-500);
  --color-on-warning-fill: var(--color-hiili-900);
  --color-warning-bg: var(--color-tarkistettava-100);
  --color-warning-line: var(--color-tarkistettava-200);
  --color-success: var(--color-onnistui-600);
  --color-success-bg: var(--color-onnistui-100);
  --color-success-line: var(--color-onnistui-200);
  --color-info: var(--color-info-600);
  --color-info-bg: var(--color-info-100);
  --color-info-line: var(--color-info-200);
}