/* ============================================================
   KeyLen Web — design tokens
   ------------------------------------------------------------
   The single source of colour, layout and spacing values for the
   site. Components must consume these variables and must not
   hard-code colour.

   Derived from the frozen Quiet Flow (Direction B2) visual
   direction. Deliberately small: this is the set the homepage and
   upcoming product pages will actually reuse, not a design system.
   ============================================================ */

:root {

  /* ---- colour ------------------------------------------------ */
  --bg:          #FFFFFF;
  --fg:          #0C1220;   /* headings, links, body-strong */
  --muted:       #59647A;   /* body copy, nav, secondary */
  --faint:       #6A758A;   /* bridge sub-lines — 4.64:1 on white (Round 3J: was #8B94A6, 3.05:1, below WCAG AA) */
  --accent:      #1E5FD0;   /* links, labels, journey marks — hue ~217° */
  --accent-soft: #EEF4FE;   /* the one tinted surface */
  --fg-panel:    #2A3546;   /* text on the tinted surface */
  --fg-note:     #707682;   /* the footer's note line — 4.56:1 on white (Round 3J: was #A0A4AD, 2.50:1, below WCAG AA) */
  --rule:        #E6EBF3;   /* hairlines, borders */

  /* ---- typography --------------------------------------------
     System stack only. No external font, no network dependency.
     The display typeface remains OPEN — nothing here chooses one. */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
               Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               sans-serif;

  --fs-display:  clamp(42px, 5.4vw, 64px);
  --fs-lede:     21px;
  --fs-section:  clamp(28px, 3.0vw, 40px);   /* product-section headline */
  --fs-bridge:   clamp(26px, 3.0vw, 38px);   /* bridge headline */
  --fs-closing:  clamp(32px, 4.2vw, 52px);   /* the page's closing statement */
  --fs-body:     17px;
  --fs-body-lg:  18px;                       /* product-section body copy */
  --fs-small:    16px;                       /* privacy statements, CTAs */
  --fs-label:    12px;
  --fs-nav:      15px;
  --fs-brand:    17px;

  --lh-body:     1.62;
  --lh-body-zh:  1.80;   /* Chinese needs more leading than Latin at the same size */
  --lh-display:  1.06;
  --lh-display-zh: 1.20;
  --lh-section:  1.16;
  --lh-bridge:   1.14;

  --track-display:    -0.028em;
  --track-display-zh:  0em;   /* negative tracking damages CJK */
  --track-section:    -0.022em;
  --track-bridge:     -0.02em;
  --track-label:       0.16em;

  --measure:     60ch;   /* the reading measure for running copy */

  /* ---- layout ------------------------------------------------ */
  --maxw:      1320px;
  --gutter:    48px;    /* desktop page gutter */
  --gutter-sm: 24px;    /* mobile page gutter */
  --colgap:    36px;
  --cols:      12;

  /* ---- spacing primitives ------------------------------------ */
  --space-1:   8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-6:  48px;
  --space-8:  64px;
  --space-12: 96px;
  --space-16: 128px;

  /* ---- section rhythm ----------------------------------------
     The vertical padding of a product section. A named token rather
     than a numbered step, because it is a structural value the
     upcoming sections will share, and it carries B2's exact figure. */
  --section-pad:    104px;
  --section-pad-sm:  64px;

  /* A bridge is deliberately lighter than a product section. That
     difference IS the page's rhythm: the products are the argument,
     the bridges are the breath between them. */
  --bridge-pad:     76px;
  --bridge-pad-sm:  52px;

  /* BUILD is lighter again, and asymmetric — the extra space sits
     BELOW it, so the section closes rather than opens. B2's exact
     values; not rounded onto the spacing scale. */
  --build-pad:      48px 0 76px;
  --build-pad-sm:   32px 0 52px;

  /* CLOSING is asymmetric in the other direction: less space above,
     more BELOW, so the page closes rather than simply stops. It is
     the last thing on the page, so its bottom padding is the page's
     final breath. B2's exact values. */
  --closing-pad:    96px 0 132px;
  --closing-pad-sm: 64px 0 88px;

  /* ---- header ------------------------------------------------ */
  --header-h:    70px;
  --header-h-sm: 60px;

  /* ---- rule / border ----------------------------------------- */
  --rule-w: 1px;
}