/* ==========================================================================
   KOTA — design tokens
   ==========================================================================
   One source of truth for both Kota surfaces: the operator looking at their
   own KYC record, and the bank reviewing that operator. They were drifting
   apart on two private vocabularies -- one calling it --ink and --card, the
   other --text and --surface -- so the same idea had two names and two values.

   The warm orange and the warm dark are deliberate: Straatos runs teal, WAZI
   runs gold, and Kota needs to read as its own product at a glance.
   ========================================================================== */

:root{
  --bg:#F9FAFB; --surface:#FFFFFF; --surface-2:#FCFCFD;
  --border:#EAECF0; --border-soft:#F3F4F6;
  --text:#101828; --text-2:#384250; --muted:#667085; --muted-2:#9DA4AE; --faint:#D2D6DB;
  --accent:#E25E25; --accent-hover:#C94F1C; --accent-soft:#F08F65; --accent-tint:#FFF3EE; --accent-tint-2:#FFE2D6;
  --good:#027A48; --good-bg:#ECFDF3; --good-bd:#ABEFC6;
  --warn:#B54708; --warn-bg:#FFFAEB; --warn-bd:#FEDF89;
  --bad:#B42318;  --bad-bg:#FEF3F2;  --bad-bd:#FECDCA;
  --info:#175CD3; --info-bg:#EFF4FF; --info-bd:#B2CCFF;
  --approve:#067647; --approve-hover:#055c37;
  --reject:#D92D20;
  --correct:#B54708;
  --c-green:#6AD99E; --c-yellow:#FFC069; --c-orange:#FF9C6E; --c-red:#F97066;
  --c-line-a:#E25E25; --c-line-b:#85A5FF;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.10);
  --shadow-lg:0 8px 24px rgba(16,24,40,.12);
  --radius:12px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#151109; --surface:#211A12; --surface-2:#271F16;
    --border:#352B20; --border-soft:#2C2318;
    --text:#F6EFE7; --text-2:#DCD1C4; --muted:#A99C8C; --muted-2:#7E7161; --faint:#4C4133;
    --accent:#F0743F; --accent-hover:#F5854F; --accent-soft:#F08F65; --accent-tint:#2B1B10; --accent-tint-2:#3A2416;
    --good:#75E0A7; --good-bg:#0F241A; --good-bd:#1F4632;
    --warn:#FDB750; --warn-bg:#2A2010; --warn-bd:#5A431A;
    --bad:#FDA29B;  --bad-bg:#2A1512;  --bad-bd:#5A2723;
    --approve:#12B76A; --approve-hover:#3BCB86;
    --reject:#F04438;
    --correct:#F79009;
    --c-line-b:#9DB0FF;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.5);
    --shadow-lg:0 10px 28px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --bg:#151109; --surface:#211A12; --surface-2:#271F16;
  --border:#352B20; --border-soft:#2C2318;
  --text:#F6EFE7; --text-2:#DCD1C4; --muted:#A99C8C; --muted-2:#7E7161; --faint:#4C4133;
  --accent:#F0743F; --accent-hover:#F5854F; --accent-soft:#F08F65; --accent-tint:#2B1B10; --accent-tint-2:#3A2416;
  --good:#75E0A7; --good-bg:#0F241A; --good-bd:#1F4632;
  --warn:#FDB750; --warn-bg:#2A2010; --warn-bd:#5A431A;
  --bad:#FDA29B;  --bad-bg:#2A1512;  --bad-bd:#5A2723;
  --info:#9DB0FF; --info-bg:#141B2E; --info-bd:#2C3859;
  --approve:#12B76A; --approve-hover:#3BCB86;
  --reject:#F04438;
  --correct:#F79009;
  --c-line-b:#9DB0FF;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.5);
  --shadow-lg:0 10px 28px rgba(0,0,0,.55);
}

/* The app shell chrome. Not part of the review screen's own palette, but both
   surfaces wear it, so it lives here rather than being hardcoded twice. */
:root {
  --sidebar: #384250;
  --sidebar-2: #2E3742;
  --sidebar-text: rgba(255, 255, 255, 0.78);
  --sidebar-text-strong: rgba(255, 255, 255, 0.95);
  --sidebar-hover: rgba(255, 255, 255, 0.06);
}
:root[data-theme="dark"], :root:not([data-theme="light"]) {
  --sidebar: #1B150E;
  --sidebar-2: #241C13;
}