/* ============================================================
   Spark Collective 星火社 — Design Tokens v2.0
   Brand System Part 1 · July 2026
   Source of truth: tokens.json (same folder) mirrors this file.
   ============================================================ */
:root {
  /* ---------- COLOUR · primary triad ---------- */
  --sc-color-black:        #000000;  /* Ink Black — dominant field (60–75%) */
  --sc-color-red:          #A31621;  /* Spark Red 星火红 (Ruby) — CMYK 20/100/90/20 */
  --sc-color-white:        #FFFFFF;  /* Signal White */

  /* ---------- COLOUR · secondary (optical mixes) ---------- */
  --sc-color-ember:        #5A0C12;  /* ruby-on-black dither field, as a solid */
  --sc-color-ochre:        #8F7A00;  /* yellow-on-black mix — sparing accent */
  --sc-color-ash:          #9A9A9A;  /* utility neutral */

  /* ---------- COLOUR · functional aliases ---------- */
  --sc-bg:                 var(--sc-color-black);
  --sc-bg-inverse:         var(--sc-color-white);
  --sc-bg-raised:          var(--sc-color-ember);
  --sc-text:               var(--sc-color-white);
  --sc-text-inverse:       var(--sc-color-black);
  --sc-text-muted:         var(--sc-color-ash);
  --sc-accent:             var(--sc-color-red);
  --sc-border:             var(--sc-color-ash);
  --sc-border-strong:      var(--sc-color-white);
  --sc-state-disabled:     #3A3A3A;

  /* ---------- SPACE · 8px base scale ---------- */
  --sc-space-0:   0;
  --sc-space-1:   8px;
  --sc-space-2:   16px;
  --sc-space-3:   24px;
  --sc-space-4:   32px;
  --sc-space-6:   48px;
  --sc-space-8:   64px;
  --sc-space-12:  96px;
  --sc-space-16:  128px;

  /* ---------- TYPE · families ---------- */
  --sc-font-display:    "Syne", sans-serif;
  --sc-font-display-zh: "ZCOOL QingKe HuangYou", sans-serif;
  --sc-font-body:       "Helvetica Neue", Helvetica, Arial,
                        "PingFang SC", "Noto Sans SC", sans-serif;

  /* ---------- TYPE · scale (~1.333 ratio, named steps) ---------- */
  --sc-text-caption:   13px;   /* labels, captions — all-caps permitted here only */
  --sc-text-body:      16px;   /* body copy */
  --sc-text-lead:      21px;   /* intro paragraphs */
  --sc-text-h3:        28px;
  --sc-text-h2:        38px;
  --sc-text-h1:        50px;
  --sc-text-display:   67px;   /* hero statements */

  /* ---------- TYPE · line heights ---------- */
  --sc-leading-display: 1.05;  /* Syne headlines — designed tight */
  --sc-leading-heading: 1.15;
  --sc-leading-body:    1.55;
  --sc-leading-caption: 1.4;

  /* ---------- TYPE · weights ---------- */
  --sc-weight-display:  800;   /* Syne ExtraBold */
  --sc-weight-heading:  700;
  --sc-weight-medium:   500;
  --sc-weight-body:     400;

  /* ---------- SHAPE ---------- */
  --sc-radius:          0px;   /* hard edges only — named so no one invents one */
  --sc-rule-weight:     2px;   /* dividers: solid, square-ended */
  --sc-border-width:    2px;
  --sc-dither-cell:     2px;   /* the brand's conceptual pixel */

  /* ---------- MOTION ---------- */
  --sc-motion-instant:  80ms;  /* hovers: invert / ignite */
  --sc-motion-fast:     160ms; /* state changes, menus, accordions */
  --sc-motion-reveal:   640ms; /* hero-scale Ignition Grain reveal (8 steps × 80ms) */
  --sc-motion-grain:    420ms; /* sitewide miniature grain reveal (4 steps) */
  --sc-motion-stagger-step: 70ms; /* delay between staggered children */
  --sc-ease-stepped:    steps(4, end);   /* default — motion switches like dither dots */
  --sc-ease-linear:     linear;          /* only for the grain reveal */
  /* No spring/bounce easings exist in this system. No fades over 160ms.

     NAMED MOTION PATTERNS (triggered via data-animate="…", see js/motion.js):
       grain-reveal   images assemble through hard pixel-grid steps (24→12→6→1)
                      over --sc-motion-grain. The site's signature scroll reveal.
       stagger-in     children step in one-by-one, --sc-motion-stagger-step apart,
                      each an 8px stepped rise over --sc-motion-fast.
       rise-in        a single block steps into place (same rise, no stagger).
       ignite-hover   interactive element turns --sc-color-red on hover (CSS).
       invert-hover   black↔white swap on hover (CSS).
     The hero ignition and the cursor ember burst are the two bespoke uses of
     this grammar; everything else must use the named patterns above. */

  /* ---------- ELEVATION ---------- */
  /* No shadows. Depth = colour plane changes (black → ember → white). */
  --sc-z-base:      0;
  --sc-z-nav:       100;
  --sc-z-overlay:   200;
  --sc-z-modal:     300;

  /* ---------- LAYOUT · breakpoints ---------- */
  --sc-bp-sm:   480px;   /* ≤480: 4-col, gutter 16, margin 16 */
  --sc-bp-md:   768px;   /* 481–768: 8-col, gutter 24, margin 24 */
  --sc-bp-lg:   1080px;  /* 769–1080: 12-col, gutter 24, margin 32 */
  --sc-bp-xl:   1440px;  /* >1080: 12-col, gutter 32, content capped */
  --sc-content-max: 1200px;
}