/* Brand palette, typography and identity primitives from the approved visual manual.
   System aliases and page/component sizing belong in site-tokens.css. */
/* ============================================================================
   VASCUMED — DESIGN SYSTEM TOKENS
   LOCKED TO THE OFFICIAL VISUAL IDENTITY MANUAL (Vascumed_DesignManual_202607).

   THIS FILE IS THE DESIGN SYSTEM. It is not a suggestion layer.
   Operator instruction, 2026-08-05: "the design system coming from this is a hard
   rule and cant drift even slightly."

   RULES FOR ANYONE EDITING THIS PROJECT
   -------------------------------------
   1. No colour may appear anywhere in the CSS that is not a token from this file.
      The only additions permitted are #FFFFFF, #000000 and rgba()/color-mix()
      derivations of tokens below for shadows and scrims.
   2. No font family other than Figtree. The manual calls Figtree an
      "unchangeable part of the visual identity". Arial is the manual's fallback
      for MS Office only - it is NOT a web fallback here.
   3. The VM stroke geometry and its 30% per-stroke opacity are fixed. See
      assets/vm-symbol.svg.
   4. `scripts/check-design-system.py` enforces 1-3 mechanically. It must pass
      before any deploy.

   PROVENANCE OF THE COLOUR VALUES
   -------------------------------
   The 100% values are the WEB hex codes printed in the manual (p.14-15).
   The 80/60/40/20/10% tints are NOT an RGB blend toward white - the manual's
   ladders are CMYK tints, which land elsewhere. They were sampled directly from
   the manual's own tint artwork (p.14-15, rendered at 150dpi, median of a pixel
   block per swatch) and offset-corrected so the 100% step equals the printed hex.
   A naive RGB blend drifts by up to 19/255 on the blue ramp; these do not.
   ========================================================================== */

:root {
  /* --- Brand primary. Whole clinic + the "Žilní chirurgie" specialisation.
         Manual: RGB 77|190|211 · CMYK 65|0|15|0 · PANTONE 3115 C/U --- */
  --vm-blue-100: #4DBED3;
  --vm-blue-80:  #80CCDC;
  --vm-blue-60:  #A7DAE5;
  --vm-blue-40:  #C7E7ED;
  --vm-blue-20:  #E4F4F6;
  --vm-blue-10:  #F1FAFA;

  /* --- "Plastická chirurgie" specialisation. RGB 167|147|182 · CMYK 40|45|10|0 --- */
  --vm-mauve-100: #A793B6;
  --vm-mauve-80:  #B8A8C5;
  --vm-mauve-60:  #C9BDD4;
  --vm-mauve-40:  #DBD3E2;
  --vm-mauve-20:  #EDE9F1;
  --vm-mauve-10:  #F6F4F8;

  /* --- "Dermatologie" specialisation. RGB 211|184|172 · CMYK 7|23|23|15 --- */
  --vm-nude-100: #D3B8AC;
  --vm-nude-80:  #DCC5BC;
  --vm-nude-60:  #E5D3CC;
  --vm-nude-40:  #EEE1DC;
  --vm-nude-20:  #F7EFED;
  --vm-nude-10:  #FBF7F6;

  /* --- Primární podkladová barva (the dark ground).
         RGB 70|97|129 · CMYK 65|40|10|40.
         Manual: dominant background for web sections; damps visual noise so bright
         accents "jump forward"; only LIGHT type on it. --- */
  --vm-ink-100: #466181;
  --vm-ink-80:  #687B97;
  --vm-ink-60:  #8A98AF;
  --vm-ink-40:  #AFB8C8;
  --vm-ink-20:  #D6DAE3;
  --vm-ink-10:  #EBECF1;

  --vm-white: #FFFFFF;
  --vm-black: #000000;

  /* --- Specialisation mapping (manual p.3/6 + letterhead p.22).
         Each specialisation owns exactly one colour. Never cross them. --- */
  --spec-zilni:  var(--vm-blue-100);
  --spec-plast:  var(--vm-mauve-100);
  --spec-derma:  var(--vm-nude-100);

  /* ------------------------------------------------------------------ *
   * CONTRAST — COMPUTED (WCAG 2.1 relative luminance), not asserted.    *
   * The manual claims its light-on-dark pairs "meet strict WCAG".       *
   * That is true for white and the light ink tints. It is NOT true for  *
   * the brand cyan, and this constrains the design:                     *
   *                                                                     *
   *   on --vm-ink-100 (#466181):                                        *
   *     #FFFFFF ......... 6.39:1  AA body        OK                     *
   *     --vm-ink-10 ..... 5.42:1  AA body        OK                     *
   *     --vm-ink-20 ..... 4.56:1  AA body        OK (thin margin)       *
   *     --vm-blue-40 .... 4.89:1  AA body        OK  <- safe cyan text  *
   *     --vm-blue-60 .... 4.20:1  large only                            *
   *     --vm-blue-80 .... 3.53:1  large only                            *
   *     --vm-nude-100 ... 3.41:1  large only                            *
   *     --vm-blue-100 ... 2.93:1  NOT TEXT AT ALL - graphics only       *
   *     --vm-mauve-100 .. 2.28:1  NOT TEXT AT ALL - graphics only       *
   *                                                                     *
   *   on #FFFFFF:                                                       *
   *     --vm-ink-100 .... 6.39:1  AA body        OK                     *
   *     --vm-ink-80 ..... 4.31:1  large only                            *
   *     --vm-blue-100 ... 2.18:1  NOT TEXT AT ALL                       *
   *     --vm-mauve-100 .. 2.80:1  NOT TEXT AT ALL                       *
   *                                                                     *
   * CONSEQUENCE: the brand cyan is a GRAPHIC colour - rules, strokes,   *
   * the VM geometry, icons, fills, underlines, focus rings. It is never *
   * the colour of a word the visitor has to read, on either ground.     *
   * Where a cyan-family text accent is wanted, use --vm-blue-40 on ink. *
   * ------------------------------------------------------------------ */
  --vm-on-ink:        var(--vm-white);
  --vm-on-ink-muted:  var(--vm-ink-20);
  --vm-on-ink-accent: var(--vm-blue-40);   /* 4.89:1 — safe for body text */
  --vm-on-light:      var(--vm-ink-100);   /* 6.39:1 on white */

  /* --- Typography. Figtree only. Manual §04. --- */
  --vm-font: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* The manual's own set text: Figtree Regular + Extra Bold, 7-11pt,
     leading ~1.39 (9pt/12.5pt). Weight roles below follow the shipped cuts. */
  --vm-w-light: 300;
  --vm-w-regular: 400;
  --vm-w-medium: 500;
  --vm-w-semibold: 600;
  --vm-w-bold: 700;
  --vm-w-extrabold: 800;
  --vm-w-black: 900;

  /* Recurring device across the whole manual: wide-tracked uppercase for section
     labels and for the KLINIKA descriptor under the wordmark. */
  --vm-track-label: 0.22em;
  --vm-track-display: -0.01em;

  /* --- VM graphic element. Manual §02.
         Geometry measured from the manual's vectors:
           stroke lean off vertical .... 22.77deg
           skew factor (run/rise) ...... 0.4197
           stroke width / vertical span  0.2804
           VM bounding aspect (w/h) .... 1.5996
         Construction: base ink at 30% opacity, PER STROKE (never group opacity,
         or the crossings stop darkening). 100% tint for blue and mauve,
         80% tint for the dark blue. --- */
  --vm-stroke-opacity: 0.3;
  --vm-stroke-lean: 22.77deg;
  --vm-stroke-skew: 0.4197;
  --vm-stroke-ink-blue:  var(--vm-blue-100);
  --vm-stroke-ink-mauve: var(--vm-mauve-100);
  --vm-stroke-ink-dark:  var(--vm-ink-80);

  /* --- Logo. Manual §01.
         Clear space on all sides = cap height of the letters "MED".
         Minimum width: vertical lockup 14mm, horizontal lockup 16mm
         (~53px / ~60px at 96dpi - never render smaller).
         White lockup on dark/black grounds; colour or black on white/light. --- */
  --vm-logo-clear: 0.34em;
  --vm-logo-min-h: 60px;
  --vm-logo-min-v: 53px;
}