/* ==========================================================================
   Lizhisec v2 — Design Tokens
   Inspired by bflabs.cn — warm cream + charcoal + vibrant orange
   ========================================================================== */

:root {
  /* —— Color palette (matched to bflabs.cn) ———————————————— */
  --warm-white:      #faf8f5;
  --warm-white-soft: #f4f0e9;
  --warm-white-deep: #efebe4;
  --soft-tone:       #e7e2d7;
  --sand:            #f1ece3;
  --pale-blue:       #e8f1f7;

  --charcoal: #111417;
  --ink:      #1e2226;
  --graphite: #2f3338;
  --steel:    #6b7177;
  --silver:   #8f9499;
  --light-gray: #d9dce0;

  --orange:      #ff6a33;
  --orange-deep: #e85a26;
  --orange-soft: #ff6a3314;
  --signal-blue: #4c7faf;

  /* Subtle alpha variants (used in overlays + borders) */
  --line:       #11141729;
  --line-deep:  #1114173d;
  --line-dark:  #faf8f533;
  --shadow-sm:  0 1px 2px #11141714;
  --shadow-md:  0 4px 16px #1114171a;
  --shadow-lg:  0 12px 40px #11141729;

  /* —— Typography —————————————————————————— */
  --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont,
    "PingFang SC", "Noto Sans SC", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont,
    "PingFang SC", "Noto Sans SC", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular,
    "PingFang SC", monospace;

  /* Heading sizes (multiple variants matching bflabs.cn) */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 24px;

  /* Primary heading sizes — 4 context-dependent clamps */
  --primary-heading-size:    clamp(50px, 6vw, 72px);
  --primary-heading-size-lg: clamp(52px, 8vw, 92px);
  --primary-heading-size-xl: clamp(52px, 10.5vw, 84px);
  --primary-heading-size-sm: clamp(46px, 15vw, 68px);

  --fs-display:    var(--primary-heading-size);
  --fs-display-lg: var(--primary-heading-size-lg);

  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-normal: 1.55;
  --lh-loose: 1.75;

  /* —— Layout ———————————————————————————— */
  --content-max: 1600px;
  --gutter: clamp(32px, 5vw, 72px);
  --gutter-tight: clamp(20px, 3vw, 32px);
  --header-h: 88px;

  /* Asymmetric inline padding: max of --gutter or half the leftover
     beyond max-width. Matches bflabs.cn's --page-inline.            */
  --page-inline: max(var(--gutter), calc((100vw - var(--content-max)) / 2));

  /* —— Reveal Y offsets (per element type) —————— */
  --reveal-y:        14px;
  --reveal-y-body:   16px;
  --reveal-y-card:   16px;
  --reveal-y-meta:   10px;
  --reveal-y-title:  20px;
  --reveal-y-large:  32px;

  /* —— Kinetic heading tokens ———————————————— */
  --word-opacity: 1;
  --word-scale:   1;
  --word-shift:   0px;

  /* Theme variants: rest/echo/muted/active per theme */
  --kinetic-rest:   var(--charcoal);
  --kinetic-active: var(--orange);
  --kinetic-muted:  var(--steel);
  --kinetic-echo:   #ff6a33a3;

  /* —— Geometry decoration tokens ————————————— */
  --geometry-stroke:   var(--charcoal);
  --geometry-accent:   var(--orange);
  --geometry-opacity:  0.14;
  --geometry-follow-y: 0px;
  --geometry-tilt:     0deg;
  --geometry-interaction: 0;

  /* —— Title tone (sub-heading color) ——————————— */
  --title-tone: var(--silver);

  /* —— Echo opacity (heading ghost shadow) ——————— */
  --echo-opacity: 0.065;

  /* —— Motion ———————————————————————————— */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 600ms;

  /* —— Radii ————————————————————————————— */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* —— Z-index ——————————————————————————— */
  --z-header: 50;
  --z-mobile-menu: 40;
  --z-overlay: 60;
}