/* CLIXHOUSE design system — typed token registrations (@property)
   ─────────────────────────────────────────────────────────────────
   Registers the brand-overridable semantic tokens with @property so:
     1. an invalid site override (e.g. `--accent: 16px`) falls back to
        the registered initial-value instead of making the property
        guaranteed-invalid and breaking every rule that consumes it;
     2. registered tokens become INTERPOLABLE — --accent, --radius-*,
        and the motion durations can transition/animate (e.g. an accent
        crossfade on theme toggle), which plain custom properties cannot.

   Imported BEFORE tokens-defaults.css within @layer tokens (see
   index.css) so the defaults assign onto already-registered properties.

   @property is Baseline WIDELY available — pure upside, no @supports.

   SCOPE NOTE — the fluid scale steps (--step-*, --space-*) are
   intentionally NOT registered. Their values are clamp(... vw ...),
   which is a valid *assigned* <length> but NOT a valid computationally-
   independent @property *initial-value*; registering them would force a
   static initial that misrepresents the fluid token. They are framework-
   internal and rarely overridden per-step, so the cost outweighs the win.

   COLOR NOTE — --paper/--ink/--accent are light-dark() pairs in
   tokens-defaults.css. light-dark() is a valid <color> value, so the
   registration accepts it and resolves per the active color-scheme.

   Imported via: @import url("/static/design/tokens-typed.css") layer(tokens);
   Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/@property
*/

@layer tokens {
  /* ── Brand color primitives + status tones ───────────────────── */
  @property --paper   { syntax: "<color>"; inherits: true; initial-value: oklch(0.98 0.005 90); }
  @property --ink     { syntax: "<color>"; inherits: true; initial-value: oklch(0.20 0.010 60); }
  @property --accent  { syntax: "<color>"; inherits: true; initial-value: oklch(0.55 0.15 250); }
  @property --success { syntax: "<color>"; inherits: true; initial-value: oklch(0.52 0.13 150); }
  @property --warning { syntax: "<color>"; inherits: true; initial-value: oklch(0.68 0.15 75); }
  @property --danger  { syntax: "<color>"; inherits: true; initial-value: oklch(0.55 0.18 25); }

  /* ── Measure + radius (interpolable) ─────────────────────────── */
  @property --measure     { syntax: "<length-percentage>"; inherits: true; initial-value: 65ch; }
  @property --radius-sm   { syntax: "<length>"; inherits: true; initial-value: 0.25rem; }
  @property --radius-md   { syntax: "<length>"; inherits: true; initial-value: 0.5rem; }
  @property --radius-lg   { syntax: "<length>"; inherits: true; initial-value: 1rem; }
  @property --radius-full { syntax: "<length>"; inherits: true; initial-value: 9999px; }

  /* ── Motion durations (interpolable) ─────────────────────────── */
  @property --motion-fast { syntax: "<time>"; inherits: true; initial-value: 150ms; }
  @property --motion-base { syntax: "<time>"; inherits: true; initial-value: 250ms; }
  @property --motion-slow { syntax: "<time>"; inherits: true; initial-value: 500ms; }

  /* ── Motion easings (registered, NOT interpolable) ───────────── */
  /* EASING NOTE — the @property `syntax` grammar accepts a fixed set of
     component types (<length>, <color>, <time>, <number>, <angle>, …);
     <easing-function> is NOT among them (verified MDN/spec, 2026). So an
     easing token cannot be type-validated the way --motion-fast is.

     We register them with the universal syntax "*" + an initial-value
     anyway, for ONE concrete benefit: an à-la-carte site that imports a
     file referencing --motion-ease *before* tokens-defaults.css assigns
     it resolves to the registered initial instead of the guaranteed-
     invalid value (which would void the whole consuming declaration).
     No interpolation is lost — easing functions are not animatable.

     The stagger index (a <number>) IS truly typed below, so per-item
     stagger delays stay interpolable. */
  @property --motion-ease    { syntax: "*"; inherits: true; initial-value: cubic-bezier(0.4, 0, 0.2, 1); }
  @property --motion-spring  { syntax: "*"; inherits: true; initial-value: cubic-bezier(0.34, 1.56, 0.64, 1); }
  @property --ease-out-quint { syntax: "*"; inherits: true; initial-value: cubic-bezier(0.22, 1, 0.36, 1); }
  @property --ease-spring    { syntax: "*"; inherits: true; initial-value: cubic-bezier(0.34, 1.56, 0.64, 1); }
  @property --ease-spring-soft { syntax: "*"; inherits: true; initial-value: cubic-bezier(0.34, 1.3, 0.64, 1); }

  /* ── Stagger (index interpolable; invalid override → 0) ──────── */
  @property --stagger-index { syntax: "<number>"; inherits: true; initial-value: 0; }
  @property --stagger-step  { syntax: "<time>";   inherits: true; initial-value: 60ms; }

  /* ── Container widths ────────────────────────────────────────── */
  @property --container-narrow  { syntax: "<length>"; inherits: true; initial-value: 40rem; }
  @property --container-default { syntax: "<length>"; inherits: true; initial-value: 72rem; }
  @property --container-wide    { syntax: "<length>"; inherits: true; initial-value: 90rem; }
}