/* css/perusta.css — design tokens, reset and colour helpers.
   Shared by both views and identical in both. Everything that differs between the
   dealership board and the partner queue belongs in their own sheet, not here. */
:root{
  --ink:#1B1D20; --ink-soft:#4C463F; --muted:#7A7168; --muted2:#A2988E;
  --canvas:#FFF8F1; --card:#FFFFFF; --line:#EFE2D6; --line2:#F7EDE4;

  --oranssi:#DE5A08; --oranssi2:#F5A02F;  /* the theme surface: header bars and brand */
  --brand:#1B1D20; --brand2:#2E3238; --brand3:#DE5A08;   /* action = near black on orange */
  --brand-t:#1B1D20;      /* dark enough to read as text */
  --brand-ink:#FFFFFF;    /* text that sits on the dark action surface */
  --slate:#4C463F;  --slate-s:#F1EAE3;
  --amber:#8A6212;  --amber-s:#FFF4D9;
  --violet:#B4560A; --violet-s:#FFEEDF;
  --cyan:#0E7C93;   --cyan-s:#DEF2F6;
  --blue:#25578F;   --blue-s:#E4EBF3;
  --teal:#0D8377;   --teal-s:#D9F1EE;
  --green:#0A7F55;  --green-s:#DCF2E6;
  --rose:#C62B3E;   --rose-s:#FCE4E7;
  --indigo:#2C4A6E; --indigo-s:#E4EAF1;
  --orange:#B4451C; --orange-s:#FBE7DE;
  --sky:#116C9E;    --sky-s:#E0EFF8;
  --pink:#B02A63;   --pink-s:#FBE4EE;

  --sans:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --varjo:0 1px 2px rgba(60,30,8,.05), 0 6px 20px rgba(60,30,8,.08);
  --varjo2:0 4px 10px rgba(60,30,8,.08), 0 18px 40px rgba(60,30,8,.14);
}
*{box-sizing:border-box}
html,body{margin:0}
/* No font-size here on purpose: the dealership board is a dense desktop view (15px) and the
   partner queue is a touch view (16px). Each sheet sets its own — neither inherits the other's. */
body{background:var(--canvas);color:var(--ink);font-family:var(--sans);line-height:1.5;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;letter-spacing:-.015em}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- colour helpers: p- = tinted pill, b- = solid block ---------- */
.p-slate{background:var(--slate-s);color:var(--slate)}   .b-slate{background:var(--slate)}
.p-amber{background:var(--amber-s);color:var(--amber)}   .b-amber{background:var(--amber)}
.p-violet{background:var(--violet-s);color:var(--violet)}.b-violet{background:var(--violet)}
.p-cyan{background:var(--cyan-s);color:var(--cyan)}      .b-cyan{background:var(--cyan)}
.p-blue{background:var(--blue-s);color:var(--blue)}      .b-blue{background:var(--blue)}
.p-teal{background:var(--teal-s);color:var(--teal)}      .b-teal{background:var(--teal)}
.p-green{background:var(--green-s);color:var(--green)}   .b-green{background:var(--green)}
.p-rose{background:var(--rose-s);color:var(--rose)}      .b-rose{background:var(--rose)}
.p-indigo{background:var(--indigo-s);color:var(--indigo)}.b-indigo{background:var(--indigo)}
.p-orange{background:var(--orange-s);color:var(--orange)}.b-orange{background:var(--orange)}
.p-sky{background:var(--sky-s);color:var(--sky)}         .b-sky{background:var(--sky)}
.p-pink{background:var(--pink-s);color:var(--pink)}      .b-pink{background:var(--pink)}