/* Every value the interface agrees on, in one place.

   Two rules govern this file.

   One: brand is not semantics. The Turbo-Tec palette was built for large
   areas of colour on a marketing site, not for small interface text. The
   brand lime reaches 1.79:1 against white — as a text colour it is unreadable,
   as a button background under dark text it reaches 8.43:1 and is perfect.
   So brand tokens say where the colour comes from, semantic tokens say what a
   colour means, and screens only ever use the semantic ones.

   Two: sizes are in rem and the root is a percentage, so somebody who enlarged
   their system font gets an enlarged portal. Apple's own Dynamic Type ladder
   runs from a 14pt body up to 53pt; hard-coded pixels hand that person
   nothing. */

:root {
  /* ---- Brand: exact values from the corporate theme ----------------------
     Source: turbo-tec.eu/wp-content/themes/web-theme/css/variables.css
     Read 2026-08-12. Do not adjust these to taste. */
  --brand-lime: #BECB29;
  --brand-blue: #1B88C5;
  --brand-red: #E3000F;
  --brand-red-logo: #E42016;
  --brand-text: #282626;
  --brand-dark: #1D1D1B;
  --brand-canvas: #F2F2F2;
  --brand-green: #4CAF50;
  --brand-radius: 22px;
  --brand-radius-button: 17px;
  --brand-shadow: 0 3px 6px rgba(0, 0, 0, .1);
  --brand-transition: .2s ease-in-out;

  /* ---- Surfaces and ink -------------------------------------------------- */
  --c-ink: #1D1D1B;          /* 16.88:1 on white */
  --c-ink-muted: #4E4B4B;    /*  8.63:1 on white — still AAA, so it stays readable */
  --c-surface: #ffffff;
  --c-surface-2: #F7F7F5;
  --c-canvas: #F2F2F2;
  --c-line: #DCDCD8;
  --c-line-strong: #9A9A93;

  /* ---- Semantic colour. Each text token was computed, not chosen. --------
     Contrast on white / on --c-canvas: */
  --c-danger: #A4000C;       /* 8.13 / 7.26 */
  --c-danger-soft: #FFE3E6;
  --c-warn: #7A5200;         /* 6.92 / 6.18 */
  --c-warn-soft: #FFF3CD;
  --c-success: #1B6E3B;      /* 6.29 / 5.62 */
  --c-success-soft: #DFF3E6;
  --c-info: #12678F;         /* 6.25 / 5.58 — the readable relative of the brand blue */
  --c-info-soft: #DDE8FB;

  /* Resource states. One meaning, one colour, on every screen — and never
     colour alone: each of these is always paired with a word or a shape. */
  --c-free: var(--c-success);
  --c-free-soft: var(--c-success-soft);
  --c-booked: var(--c-info);
  --c-booked-soft: var(--c-info-soft);
  --c-blocked: #4A5361;      /* 7.77 / 6.94 */
  --c-blocked-soft: #E4E7ED;

  /* Action colour. The lime carries the brand; dark ink on it reads at
     9.46:1, which is why the corporate site pairs exactly these two. */
  --c-action: var(--brand-lime);
  --c-action-ink: var(--brand-dark);
  --c-accent: var(--c-info);         /* links, focus, selected state */
  --c-accent-soft: var(--c-info-soft);

  /* ---- Typefaces ---------------------------------------------------------
     Sansation is the corporate face and it earns its place: measured at the
     same size it sets a line of Polish 8.1% narrower than the system stack,
     which on a 360px phone is a whole line of text saved.

     It is not used for numbers. Its digits are proportional — at 100px the
     "1" is 31px wide and the "8" is 70px — and the file ships no `tnum`
     feature, so font-variant-numeric cannot fix it. In a column of times that
     means 09:20 and 18:00 never line up, and a column you cannot scan down is
     the one thing a schedule must not have. Numeric columns therefore use the
     system stack, whose digits are tabular by default. */
  --font-brand: Sansation, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-numeric: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---- Type scale --------------------------------------------------------
     1rem = 17px, which is the default body size iOS ships (Apple Dynamic Type,
     "Large"). Everything else is a ratio of it. */
  --t-page: clamp(1.45rem, 5.5vw, 1.65rem);   /* 24.6–28px  page/context title */
  --t-section: 1.25rem;                        /* 21.25px    section title */
  --t-card: 1.12rem;                           /* 19px       person / card title */
  --t-body: 1rem;                              /* 17px       body and controls */
  --t-meta: .9rem;                             /* 15.3px     the floor, metadata only */
  --lh-tight: 1.25;
  --lh-body: 1.5;

  /* ---- Space: a 4px rhythm ---------------------------------------------- */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  /* ---- Shape ------------------------------------------------------------- */
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: var(--brand-radius);
  --radius-pill: 999px;
  --shadow: var(--brand-shadow);

  /* ---- Targets ----------------------------------------------------------
     --tap is the size of a thing a finger hits often. 48px is the only figure
     any source states as a design recommendation (Android); WCAG's 24px is a
     legal floor and Apple's 44pt is a hit region, not a control size.
     --tap-lg is a primary action, --tap-sm the documented exception. */
  --tap: 48px;
  --tap-lg: 56px;
  --tap-sm: 44px;

  /* ---- Layout ------------------------------------------------------------ */
  --page-max: 44rem;         /* ~66 characters of body text */
  --wide-max: 100rem;
  --header-h: 56px;
}

/* Pointer capability changes density and affordances, never target size.
   A 48px button costs a mouse user nothing; a 40px one costs a finger a
   mis-tap. What a mouse does earn is tighter spacing between rows, because
   it can land precisely between them. */
@media (pointer: fine) {
  :root {
    --row-gap: var(--space-1);
  }
}
@media (pointer: coarse) {
  :root {
    --row-gap: var(--space-2);
  }
}