/* Školomat design tokens. The one source for colours, radii, type and motion in every Školomat product
   (site, Core admin, Bufetomat, Tlačomat). Products copy this file and the font next to it; they never
   write a brand colour by hand. Keep it identical to the :root block of Web/src/assets/css/site.css. */

@font-face {
  font-family: "Unageo";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonts/unageo-var.woff2") format("woff2"); /* the only line that differs from Brand/tokens.css */
}

:root {
  /* neutrals */
  --ink: #12111a;                       /* headings, primary buttons */
  --text: #22212b;                      /* body text */
  --mute: #6b6a78;                      /* secondary text */
  --line: rgba(11, 12, 18, .09);        /* hairlines */
  --bg: #ffffff;                        /* page, cards on grey */
  --bg2: #f6f5f8;                       /* grey canvas, quiet fills */

  /* brand: one calm violet, a slightly lighter partner, never pink or neon */
  --brand: #5b52c4;
  --brand2: #7468d2;
  --brand-ink: #4a42ad;                 /* violet text on light violet */
  --brand-soft: #efeef9;                /* light violet fill (icon tiles, avatars, selected rows) */
  --grad: linear-gradient(135deg, #544bbb 0%, #6a60cf 100%);          /* filled surfaces */
  --grad-text: linear-gradient(120deg, #5148b8 0%, #7a6fd6 100%);     /* gradient headings */

  /* product accents: only for that product's own highlights */
  --bufet: #d9764a;   --bufet-ink: #a84f27;   --bufet-soft: rgba(217, 118, 74, .14);
  --tlac: #2f9e8f;    --tlac-ink: #1f7469;    --tlac-soft: rgba(47, 158, 143, .14);

  /* meaning */
  --ok: #3aa776;      --ok-ink: #2a8259;      --ok-soft: rgba(58, 167, 118, .15);     /* credit in, success */
  --warn: #c98a2b;    --warn-ink: #8f5f14;    --warn-soft: rgba(201, 138, 43, .16);
  --bad: #c9504a;     --bad-ink: #a33a35;     --bad-soft: rgba(201, 80, 74, .13);

  /* shape */
  --r-xl: 36px;       /* hero cards */
  --r-lg: 28px;       /* cards */
  --r-md: 20px;       /* panels, sheets */
  --r-sm: 14px;       /* inputs, tiles, small buttons */
  --r-pill: 999px;    /* buttons, tags */

  /* depth: soft and violet-tinted, never hard black */
  --shadow-1: 0 1px 2px rgba(11, 12, 18, .05), 0 10px 24px -14px rgba(11, 12, 18, .3);
  --shadow-2: 0 1px 2px rgba(11, 12, 18, .04), 0 30px 60px -24px rgba(38, 34, 92, .26);

  /* motion and type */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --font: "Unageo", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Dark surfaces (a dark theme or a dark section) use the same violet on these neutrals. */
:root[data-theme="dark"], .on-dark {
  --ink: #f4f3fa;
  --text: #dddbe8;
  --mute: #9a98aa;
  --line: rgba(255, 255, 255, .1);
  --bg: #15141d;
  --bg2: #0c0b13;
  --brand: #8a80df;
  --brand2: #a199ea;
  --brand-ink: #c3bdf3;
  --brand-soft: rgba(138, 128, 223, .16);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 24px -14px rgba(0, 0, 0, .7);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .4), 0 30px 60px -24px rgba(0, 0, 0, .8);
}