/* ============================================================================
   SYNERGY HOW-TO LIBRARY — DESIGN TOKENS
   ----------------------------------------------------------------------------
   A separate visual register from synergy.be. Same parent brand, different job.

   Every colour pair in this file was contrast-audited against the canvas it is
   actually used on. The ratios are in the comments because they are the
   contract, not decoration: a new colour without a measured ratio is not
   finished.

   DO NOT import the main site's Tailwind build or its gradients into this file.
   The library is flat on purpose. See DESIGN-howto-library.md §2.
   ========================================================================= */

:root {
  /* ---- Canvas -------------------------------------------------------------
     Dark, cool-cast, and deliberately NOT #1f1f1f. The greys sit lower and
     bluer than Microsoft Learn's so the page reads as Synergy rather than as a
     product doc with our logo dropped on it. See PROVENANCE.md §1.4.          */
  --sg-canvas:          #101418;  /* page                                    */
  --sg-canvas-raised:   #171C22;  /* rail, guide header band, table header    */
  --sg-canvas-sunken:   #1D232A;  /* code blocks, callouts, table body        */
  --sg-canvas-inset:    #232A33;  /* inline code, hover row                   */

  /* ---- Ink ---------------------------------------------------------------
     No #fff and no #000. Pure white on dark glares at 16px; pure black makes
     hairlines vibrate on OLED.                                              */
  --sg-ink:             #E9EEF4;  /* 15.86 on canvas · 13.57 on sunken        */
  --sg-ink-muted:       #9AA6B4;  /*  7.48 on canvas ·  6.93 on raised        */
  --sg-ink-faint:       #78848F;  /*  4.84 on canvas  (AA body minimum)       */

  /* ---- Rules -------------------------------------------------------------
     Two weights with different jobs. `rule` is decorative. `rule-strong` is a
     control boundary and therefore must clear the 3:1 non-text minimum.      */
  --sg-rule:            #28313A;  /* 1.40 — decorative only                   */
  --sg-rule-strong:     #5A6673;  /* 3.16 — control/input boundaries          */

  /* ---- Accent ------------------------------------------------------------
     Brand cyan pulled down in chroma. The marketing #00F2FE measures ~12.6:1
     here and would pass, but at that saturation it vibrates against dark grey —
     fine on a hero, unbearable as a link colour on a page read for 20 minutes. */
  --sg-accent:          #5FC8D8;  /*  9.46 on canvas · 8.10 on sunken         */
  --sg-accent-quiet:    #2B7C89;  /* decorative fills: active bar, progress   */
  --sg-accent-ink:      #07121A;  /*  9.67 on accent fill                     */

  /* ---- Semantic (callouts only — never for general text) ------------------ */
  --sg-info:            #7FA8D9;  /*  7.49 — note                             */
  --sg-success:         #7FBF8C;  /*  ≥4.5  — confirmed / passed              */
  --sg-warn:            #E3B341;  /*  9.50 — caution                          */
  --sg-danger:          #E2827A;  /*  6.79 — important                        */
  --sg-decision:        #A99BE0;  /*  ≥4.5  — decision point                  */
  --sg-artefact:        #7FB6C4;  /*  ≥4.5  — artefact / deliverable          */

  /* ---- Type --------------------------------------------------------------
     One fluid scale, clamp()-based, fluid only between 768 and 1280. The scale
     is a formula rather than a list of breakpoints so components cannot drift.
     No webfonts: the reader's own UI font is the most legible thing on their
     machine and makes the page feel native rather than branded.               */
  --sg-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu,
                  Cantarell, "Helvetica Neue", Arial, sans-serif;
  --sg-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas,
                  "Liberation Mono", monospace;

  --sg-text-display: clamp(2rem, 1.35rem + 2.6vw, 2.875rem);   /* 32 → 46 */
  --sg-text-h1:      clamp(1.75rem, 1.35rem + 1.3vw, 2.375rem); /* 28 → 38 */
  --sg-text-h2:      clamp(1.375rem, 1.2rem + 0.7vw, 1.625rem); /* 22 → 26 */
  --sg-text-h3:      clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); /* 17 → 19 */
  --sg-text-body:    1rem;
  --sg-text-lg:      1.0625rem;
  --sg-text-small:   0.875rem;
  --sg-text-label:   0.75rem;

  --sg-leading-display: 1.1;
  --sg-leading-heading: 1.25;
  --sg-leading-body:    1.72;   /* dense compliance prose needs air, not size */

  --sg-measure:      68ch;      /* reading column, in characters not pixels  */
  --sg-measure-wide: 82ch;      /* tables and code may break out of it       */

  /* ---- Space -------------------------------------------------------------
     4px base. Vertical rhythm principle: spacing between blocks is larger than
     spacing within a block, and the ratio grows with depth. That asymmetry is
     what makes a long page scan as a structure rather than a wall.            */
  --sg-space-3xs: 0.25rem;   /*  4 */
  --sg-space-2xs: 0.5rem;    /*  8 */
  --sg-space-xs:  0.75rem;   /* 12 */
  --sg-space-sm:  1rem;      /* 16 */
  --sg-space-md:  1.5rem;    /* 24 */
  --sg-space-lg:  2rem;      /* 32 */
  --sg-space-xl:  3rem;      /* 48 */
  --sg-space-2xl: 4.5rem;    /* 72 */

  /* ---- Structure --------------------------------------------------------- */
  --sg-rail-w:   16.5rem;    /* 264px — measured from MS Learn's docs layout  */
  --sg-toc-w:    13rem;      /* 208px                                          */
  --sg-topbar-h: 3.5rem;     /* 56px                                           */
  --sg-radius:   0.25rem;    /* 4px. Square-ish on purpose: pills signal act.  */
  --sg-focus-ring: 2px solid var(--sg-accent);
  --sg-focus-offset: 2px;
}

/* Motion is minimal and never load-bearing. Under reduced-motion every
   transition collapses to 1ms and the rail expands instantly. The marketing
   site's shader and glow are absent, so this path is trivially complete. */
@media (prefers-reduced-motion: reduce) {
  :root { --sg-motion: 1ms; --sg-motion-ease: linear; }
}
:root {
  --sg-motion: 120ms;
  --sg-motion-slow: 200ms;
  --sg-motion-ease: cubic-bezier(0.2, 0, 0.1, 1);
}