/* GENERATED by creytix:site:revamp --fleet-assess --execute
 * Source: packages/creytix-design-tokens/assets/styles/style-presets.css
 * Styles: spatial-ui
 * Do not hand-edit — re-run execute to refresh.
 */
/* Creytix UI Style Presets — real, appliable CSS for every INTERFACE_STYLES
 * entry in src/style-taxonomy.mjs (the 25 styles with genuine token
 * implications; the 25 BRAND_MOOD_STYLES are palette/typography/imagery
 * direction, not component CSS, and have no preset here on purpose — see
 * the taxonomy module header for why).
 *
 * Usage: set `data-cx-style="<id>"` on a container, then add class
 * `cx-style-surface` to any element that should render as that style's
 * "card" (the most common single-element expression of each style). Every
 * value below matches the `tokens` documented in style-taxonomy.mjs for the
 * same id — this file is the CSS translation of that data, not a second,
 * independently-invented set of numbers. If you change a value here, update
 * the matching `tokens` entry in style-taxonomy.mjs too (same discipline
 * the fonts.css / font-library.mjs pair follows for the vendored families).
 *
 * `--cx-style-*` custom properties are exposed per style so a component can
 * consume individual pieces (e.g. just the shadow) without taking the whole
 * `.cx-style-surface` recipe. Base ground assumed light unless noted.
 *
 * 2026-08-05 revision — differentiation pass. Ricardo, live: "all of them
 * are not... none of them look great. They look the same." Root cause,
 * confirmed by comparing every style against real sourced references
 * (docs/creytix/CREYTIX_UI_STYLE_PLAYBOOK.md §6): shadow/border/radius/bg
 * varied per style, but typography, control shape, and spacing density —
 * the traits every source actually leans on hardest to differentiate real
 * design paradigms — were 100% inherited from the page body and IDENTICAL
 * across all 25. Two cards were "the same widget, different paint job."
 * This revision adds three new token dimensions, applied consistently:
 *   --cx-style-font            font-family stack (inherits into children)
 *   --cx-style-weight          base/body font-weight
 *   --cx-style-weight-heading  heading font-weight (falls back to --cx-style-weight)
 *   --cx-style-tracking        letter-spacing (inherits)
 *   --cx-style-case            text-transform (inherits; none|uppercase)
 *   --cx-style-control-radius  radius for buttons/chips — often NOT the same
 *                              as the card's own --cx-style-radius (e.g.
 *                              Fluent: sharp 4px controls in an 8px card)
 *   --cx-style-gap             component spacing/gap unit, style-specific density
 * Two new opt-in utility classes parallel `.cx-style-surface`:
 *   .cx-style-control  — apply to buttons/chips/pills for control-radius
 *   .cx-style-heading  — apply to a title/label for weight-heading + case
 * Every value below is sourced — see the playbook doc for citations per
 * style; this file only carries the CSS translation, same discipline as
 * the original preset set.
 */

/* ============================================================
 * Shared consuming layer — generic rules any style's typography/
 * shape/spacing tokens flow through. Lives once, not copy-pasted
 * per style block.
 * ============================================================ */
[data-cx-style] {
  font-family: var(--cx-style-font, inherit);
  font-weight: var(--cx-style-weight, inherit);
  letter-spacing: var(--cx-style-tracking, normal);
}
[data-cx-style] .cx-style-heading {
  font-weight: var(--cx-style-weight-heading, var(--cx-style-weight, inherit));
  text-transform: var(--cx-style-case, none);
  font-size: var(--cx-style-heading-scale, 1em);
  text-shadow: var(--cx-style-pop-shadow, none);
}
[data-cx-style] .cx-style-control {
  border-radius: var(--cx-style-control-radius, var(--cx-style-radius, 4px));
}
/* Graphic-weight utility — a giant background glyph/word used as a
 * structural design element, not content (poster/collage technique: the
 * type itself IS the imagery). Opt in with a real character/word via the
 * `data-cx-glyph` attribute; size and color come from the style's own
 * tokens so it stays in the style's palette instead of a fixed value. */
[data-cx-style] .cx-style-glyph {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  font-family: var(--cx-style-font, inherit);
  font-weight: var(--cx-style-weight-heading, 900);
  line-height: 0.75;
  color: var(--cx-style-glyph-color, currentColor);
  opacity: var(--cx-style-glyph-opacity, 0.14);
}

/* Skeuomorphism — heavy directional shadow + bevel, sharp material
 * rendering, fine grain texture, area-based gloss sheen, embossed text. */
[data-cx-style="spatial-ui"] {
  --cx-style-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  --cx-style-blur: blur(2px);
  --cx-style-radius: 36px;
  --cx-style-border: 1px solid rgba(255, 255, 255, 0.4);
  --cx-style-bg: rgba(255, 255, 255, 0.08);
  --cx-style-font: -apple-system, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif;
  --cx-style-weight: 500;
  --cx-style-weight-heading: 600;
  --cx-style-tracking: 0;
  --cx-style-control-radius: 24px;
  --cx-style-gap: 24px;
}
[data-cx-style="spatial-ui"] .cx-style-surface {
  background: var(--cx-style-bg);
  backdrop-filter: var(--cx-style-blur);
  -webkit-backdrop-filter: var(--cx-style-blur);
  border: var(--cx-style-border);
  border-radius: var(--cx-style-radius);
  box-shadow: var(--cx-style-shadow);
}

/* Flat Design — the defining absence of shadow AND of borders on
 * controls (color-block alone signals "clickable"); iOS 7's light/bold
 * weight jump, Metro's uppercase tile-label convention and 20px grid. */