/* JQU 224 */
/*
 * XsiaoLung AI company landing — design tokens.
 * Ink rematerializes from a single --on-surface seed (see html-theme-hct-ink):
 * light surfaces use the V19 blue-grey ink, the footer re-seeds a light tone, and
 * every readable string uses --text-87 / --text-67. 17 is hairlines only.
 */

:root {
  /* surfaces */
  --paper: #ffffff;
  --paper-2: #ffffff;
  --paper-3: #dfedef;
  --deep: #243b3d;
  --deep-2: #294e64;

  /* ink seed — do not re-bake 87/67/17 as hex */
  --on-surface: #243b3d;
  --text-87: color-mix(in srgb, var(--on-surface) 87%, transparent);
  --text-67: color-mix(in srgb, var(--on-surface) 67%, transparent);
  --text-17: color-mix(in srgb, var(--on-surface) 17%, transparent);
  --text-08: color-mix(in srgb, var(--on-surface) 8%, transparent);

  /* the one signal — eyebrow tick, primary button, focus ring, active nav */
  --accent: #c44736;
  --accent-deep: #b44032;
  --on-accent: #ffffff;

  /* data encoding only: funnel layers, money flows, journey rails */
  --data-green: #587f4c;
  --data-blue: #417186;
  --data-sand: #d5b36b;

  /* type · Roger.Qu — system CJK stack; no web-font fetch, so the page paints
     immediately behind the Great Firewall and on cold mobile networks */
  --font-sans:
    "PingFang SC", "HarmonyOS Sans SC", "Hiragino Sans GB", "Microsoft YaHei",
    system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-figure:
    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --text-display: clamp(2.35rem, 1.35rem + 3.4vw, 5.25rem);
  --text-h2: clamp(1.7rem, 1.15rem + 1.9vw, 3.1rem);
  --text-h3: clamp(1.1rem, 0.95rem + 0.6vw, 1.5rem);
  --text-lede: clamp(1rem, 0.94rem + 0.45vw, 1.3rem);
  --text-body: clamp(0.95rem, 0.9rem + 0.22vw, 1.08rem);
  --text-meta: clamp(0.8rem, 0.78rem + 0.12vw, 0.9rem);
  --text-figure: clamp(1.9rem, 1.2rem + 2.1vw, 3.4rem);

  /* spacing — 4 pt scale · TQQQ */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: clamp(3.25rem, 2rem + 3vw, 5.75rem);

  --rule-hair: 1px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.46, 0.64, 1);
  --dur-fast: 160ms;
  --dur-mid: 320ms;
  --dur-slow: 640ms;

  /* The centered body owns responsive width; gutters only space its content. */
  --gutter: clamp(1.15rem, 2vw, 2rem);
  --nav-h: 3.75rem;
}