/* GENERATED COPY. Source: linden-atlygis/src/styles/design-tokens.css. Do not edit here:
   edit the source and run `node scripts/sync-design-tokens.mjs <this repo>` in the app repo. */
/* Atlygis design tokens. Source: Linden Brand Book (2010) + Justinas's picks 2026-10-23 (IBM Plex Sans on screens).
   THE ONE SOURCE for the app (linden-atlygis) AND the public site (linden-atlygis-site, atlygis.linden.lt).
   Edit it HERE only, then run `node scripts/sync-design-tokens.mjs <site repo>`; the site's copy is generated.
   Rules for using these tokens: docs/design-system.md. */
:root {
  /* ---- brand colours (Brand Book p. 3 and p. 12) ---- */
  --brand-teal: #00757B;        /* Pantone 321 U, the leaf */
  --brand-grey: #3E5052;        /* Pantone 446 U, the word LINDEN */
  --brand-orange: #F7931E;      /* accent, p. 12 */
  --brand-red: #BF1E2D;         /* accent, p. 12 */
  --brand-petrol: #004A61;      /* extra, p. 12 */

  /* ---- derived shades (darker / lighter steps of the brand teal; never a new hue) ---- */
  --teal: var(--brand-teal);
  --teal-dark: #005257;         /* hover of teal */
  --teal-deep: #0B3A3D;         /* headings, the app's side menu, the site's dark bands */
  --teal-50: #EEF6F6;
  --teal-100: #D7EBEB;
  --orange: var(--brand-orange);
  --orange-dark: #C46D05;       /* border of an orange button */
  --orange-soft: #FFF3E3;

  /* ---- text and surfaces ---- */
  --ink: #16292B;               /* body text (14.9:1 on white) */
  --ink-2: var(--brand-grey);   /* secondary text (8.4:1) */
  --muted: #5B6B6D;             /* hints, labels (5.5:1 on white, 5.2:1 on --bg) */
  --line: #D5E0E0;
  --line-2: #E6EDED;
  --bg: #F5F8F8;                /* app page background */
  --surface: #FFFFFF;
  --soft: var(--teal-50);
  --side: var(--teal-deep);     /* the app's side menu */
  --side-ink: #CFE3E3;
  --side-muted: #8FB5B5;

  /* ---- status colours (functional, used only inside chips, bars and notices) ---- */
  --green: #1E7B4D;
  --green-soft: #E7F4EC;
  --amber: #8A5300;             /* orange as text (orange itself fails contrast on white) */
  --amber-soft: #FFF3E3;
  --amber-line: #F3C98E;
  --red: var(--brand-red);
  --red-soft: #FDF1F2;
  --error: var(--brand-red);
  --grey-soft: #F1F4F4;

  /* ---- type (IBM Plex Sans on screens; Calibri stays in Word documents) ---- */
  /* the app sets --font-plex / --font-plex-ext through next/font; the site's own @font-face is named "IBM Plex Sans" */
  --font-sans: var(--font-plex, "IBM Plex Sans"), var(--font-plex-ext, "IBM Plex Sans"), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font: var(--font-sans);
  --fs-xs: 0.75rem;   /* 12 px: chips, table headers */
  --fs-sm: 0.875rem;  /* 14 px: hints, menus, tables */
  --fs-md: 1rem;      /* 16 px: app body */
  --fs-lg: 1.125rem;  /* 18 px: lead text */
  --fs-xl: 1.375rem;  /* 22 px: card titles, phone h1 */
  --fs-2xl: 1.75rem;  /* 28 px: app h1 */
  --fs-3xl: 2.5rem;   /* 40 px: site h2 */
  --lh-tight: 1.2;
  --lh-body: 1.55;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- spacing (4 px steps) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ---- shape ---- */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;
  --radius: var(--r-lg);
  --shadow: 0 1px 2px rgba(11, 58, 61, .06), 0 2px 8px rgba(11, 58, 61, .04);
  --shadow-pop: 0 8px 24px rgba(11, 58, 61, .15);
  --focus: 2px solid var(--teal);

  /* ---- controls ---- */
  --btn-h: 44px;                /* tap target; small buttons never under 24 px (WCAG 2.5.8) */
  --btn-radius: var(--r-md);
}

/* ---- numbers line up in columns everywhere they are compared ---- */
.num, table td, .tabular { font-variant-numeric: tabular-nums; }

/* ---- the ONE status chip set (app: every page; site: the app pictures and badges). A chip is only ever one of these.
   Compound selectors on purpose: the site also has a plain ".chip" (a selectable option) that this must not touch. ---- */
.chip:is(.chip-done, .chip-you, .chip-client, .chip-linden, .chip-admin, .chip-later, .chip-none, .chip-warn, .chip-wait, .chip-bad) {
  display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 1px 9px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1.4; white-space: nowrap; border: 1px solid transparent;
}
.chip:is(.chip-done, .chip-you, .chip-client, .chip-linden, .chip-admin, .chip-later, .chip-none, .chip-warn, .chip-wait, .chip-bad)::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none;
}
.chip.chip-done { background: var(--green-soft); color: var(--green); }                       /* atlikta, mažiau nei 5 % */
.chip.chip-you { background: var(--teal); color: #fff; }                                      /* jūsų eilė */
.chip.chip-client, .chip.chip-linden, .chip.chip-admin, .chip.chip-warn { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-line); } /* the other side's turn, a warning */
.chip.chip-later, .chip.chip-none { background: var(--grey-soft); color: var(--muted); }        /* vėliau, nereikia */
.chip.chip-wait { background: var(--grey-soft); color: var(--ink); border: 1px dashed var(--ink-2); } /* laukiame termino */
.chip.chip-bad { background: var(--red-soft); color: var(--red); border-color: #F2C4C8; }      /* nuo 5 %, an error */