/* Design tokens of pratitendere.ba, identity "Brifing"
   (~/tenderi-data/ux-directions/brifing/DESIGN.md).

   The world: a morning briefing printed on warm paper. The page is paper,
   not blue-grey; ink is the loudest thing a row can be; colour is spent on
   exactly two things - what is yours (pine) and what is urgent (oxide).
   Money is never coloured.

   This is the only file with colour values: everything else refers to these
   custom properties. Token NAMES are unchanged from the previous identity on
   purpose - two hundred references across nine stylesheets keep working, and
   the swap is one file to read and one file to revert. One light theme; the
   report inside Analitika is forced light as well.

   Every ratio below was measured, not asserted (WCAG 2.1 relative
   luminance). Text pairs clear 4.5:1, control boundaries clear 3:1. */
:root {
  color-scheme: light;

  /* ---- paper and ink ---------------------------------------------------
     The single biggest break from the old look: the page is warm paper
     rather than a cool grey, and white is reserved for the few things that
     lift off it - inputs, the hovered row, the phone sheet. */
  --surface-100: #faf7f1;      /* the page */
  --surface-200: #ffffff;      /* inputs, cards, rows that lift off paper */
  --surface-sunk: #f2eee5;     /* navigation rail, segmented control */
  --border: #e4dfd4;           /* the hairline between rows */
  --border-firm: #cfc8b9;      /* under a section and under the table head */

  --ink: #1b1a17;              /* titles, money, day counts. 16,27:1 */
  --ink-muted: #57534a;        /* institution, captions, idle nav. 7,16:1 */
  --ink-faint: #6e6859;        /* provenance, placeholders, dates. 5,19:1 */

  /* ---- the two colours that are allowed to speak -----------------------
     Pine is personal: links, current nav, the "novo" mark, a contract you
     won. Oxide is the only alarm, and it is a warm oxide rather than a
     fire-engine red, so a deadline reads as urgent without shouting. */
  --brand: #005957;            /* 7,65:1 on paper, 8,18:1 on white. Logo teal. */
  --brand-hover: #00403e;      /* 11,65:1 */
  --accent: #005957;           /* positive status: dodijeljen, won */
  --danger: #a0331f;           /* 6,57:1 on paper, 7,03:1 on white */
  /* An open call is neither yours nor burning; it gets the third voice, an
     ochre from the same earth register. 5,53:1 on paper. */
  --warning: #8a5a12;

  /* ---- washes: a colour laid flat under its own text -------------------- */
  --brand-soft: #e3eeed;       /* current nav, text selection. brand 6,90:1 */
  --accent-soft: #e3eeed;
  --accent-ink: #005957;
  --accent-ink-strong: #00403e;
  --danger-soft: #f7e8e3;      /* the danas/sutra pill. danger 5,89:1 */
  --danger-ink: #a0331f;
  --warning-soft: #f6efe0;     /* warning 5,16:1 */
  --warning-ink: #8a5a12;
  --neutral-soft: #f2eee5;
  --on-brand: #ffffff;         /* 8,18:1 on brand, 7,03:1 on danger */
  --shadow: rgba(27, 26, 23, 0.10);

  /* ---- the wordmark ----------------------------------------------------
     Read off the logo itself, and used by nothing else: the name set beside
     the mark has to be the name AS DRAWN - "prati" in near-black, "tendere"
     in the logo's teal, ".ba" in its grey - or the header shows the mark and
     a different wordmark side by side, which is what it was doing. */
  --logo-ink: #101c21;
  --logo-teal: #007f7c;
  --logo-grey: #7b858c;

  /* ---- oblast marks ----------------------------------------------------
     Seven-pixel dots in the rail and on the tender itself, never down the
     list. The direction names five; the four verticals opened in September
     are derived in the same muted register. Nine categorical hues cannot all
     be told apart at a glance - the blues sit 15 to 26 degrees apart - so
     every mark carries sr-only text and colour is never the only signal.
     All nine measure above 4,5:1 on paper. */
  --category-teal: #2c6a6a;    /* klima, 5,82:1 */
  --category-indigo: #454f87;  /* IT, 7,22:1 */
  --category-amber: #7a5a2e;   /* vozila, 5,90:1 */
  --category-rose: #8a3a55;    /* farmacija, 6,97:1 */
  --category-blue: #2f5470;    /* osiguranje, 7,49:1 */
  --category-violet: #5c4a7a;  /* namještaj, 7,23:1 */
  --category-green: #2f6141;   /* biro materijal, 6,76:1 */
  --category-cyan: #6b3a6b;    /* higijena, 8,04:1 */
  --category-orange: #96461f;  /* HTZ, 6,15:1 */

  /* oblast -> colour */
  --oblast-klima: var(--category-teal);
  --oblast-it: var(--category-indigo);
  --oblast-vozila: var(--category-amber);
  --oblast-farmacija: var(--category-rose);
  --oblast-osiguranje: var(--category-blue);
  --oblast-namjestaj: var(--category-violet);
  --oblast-biro: var(--category-green);
  --oblast-higijena: var(--category-cyan);
  --oblast-htz: var(--category-orange);

  /* ---- control boundaries ----------------------------------------------
     An input, a select, a secondary button and a pill carry no fill and no
     underline: that border is the whole affordance, and WCAG 1.4.11 asks
     3:1 of it. This value measures 3,95:1 on white, 3,69:1 on paper, 3,41:1
     on the sunk rail and 3,35:1 on the softest wash. --border keeps
     dividers, table rules and card edges, where 3:1 is not required and a
     heavier line would only add noise. */
  --control-border: #897f6c;
  /* A control that is off still has to be perceivable: this carries the
     label at 3,52:1 on paper and 3,76:1 on white, while --disabled-ink
     stays for fills and edges that carry nothing. */
  --disabled-ink-strong: #8a8375;
  --disabled-ink: #d8d2c6;

  /* ---- type -------------------------------------------------------------
     Two voices. Source Serif 4 reads - headings, tender titles, prose - so a
     notice looks like official prose rather than a database cell. IBM Plex
     Sans instruments: money, dates, counts, controls, navigation, on true
     tabular figures. Both carry Cyrillic as a first-class script, which a
     Bosnian procurement list needs in the same table as Latin.
     Declared in fonts.css, self-hosted under /static/fonts/. */
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               system-ui, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* Scale: 11 / 12 / 13 / 14.5 / 15 / 16.5 / 20 / 28. Tightest tracking is
     -0.02em, well above the -0.04em floor. */
  --text-display: 600 31px/36px var(--font-serif);
  --text-h1: 600 28px/34px var(--font-serif);
  --text-h2: 600 20px/26px var(--font-serif);
  --text-title: 400 16.5px/23px var(--font-serif);   /* a tender's name */
  --text-prose: 400 19px/29px var(--font-serif);     /* the briefing paragraph */
  --text-body: 400 15px/22px var(--font-sans);
  --text-body-small: 400 13px/18px var(--font-sans);
  --text-label: 500 12px/16px var(--font-sans);
  --text-caption: 400 11px/14px var(--font-sans);
  --text-money: 500 19px/24px var(--font-sans);
  --text-days: 600 20px/24px var(--font-sans);

  /* ---- space ------------------------------------------------------------
     4 / 8 / 12 / 16 / 24 / 32 / 48 / 64. The first five keep their old
     names and their old values, so nothing reflows; the direction's three
     additions are new names. */
  --space-1: 4px;
  --space-2: 8px;
  --space-2h: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;

  /* ---- radius -----------------------------------------------------------
     Paper is cut, not rounded: 3 for inputs and buttons, 6 for the
     segmented control and the phone sheet, 999 for the two pills. */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 6px;
  --radius-pill: 999px;

  /* ---- shell ------------------------------------------------------------ */
  --sidebar-w: 240px;
  --topbar-h: 56px;
  /* One ring for the whole product. It is not split into a width and a colour
     custom property, because that would buy nothing: a var() inside a custom
     property is substituted where the property is DECLARED, so a `--focus-c`
     redeclared on a dark bar never reaches a `--focus` declared here
     (measured in Chromium: the scoped element still computed the root
     colour). A surface that needs another ring colour overrides the
     `outline-color` longhand instead - shell.css does that for .int-bar. */
  --focus: 2px solid var(--brand);

  /* ---- motion -----------------------------------------------------------
     One authored moment in the whole product: the briefing paragraph on
     Pregled clearing its throat, once. Everything else is a 120 ms colour
     change on hover, or nothing. */
  --ease-brief: cubic-bezier(.16, 1, .3, 1);
  --dur-brief: 620ms;
  --dur-hover: 120ms;
}

/* Paper is the page, and the browser should know it before the first paint. */
html {
  background: var(--surface-100);
}

::selection {
  background: var(--brand-soft);
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-brief: 0ms;
    --dur-hover: 0ms;
  }
}