@codecavepro/brand 1.0.0

package/dist/colors_and_type.css

@@ -0,0 +1,900 @@
+/* ============================================================================
+ * CODECAVE Design System — color and typography foundations
+ * ----------------------------------------------------------------------------
+ * Source of truth, in order of authority:
+ *   1. codecave.pro/src/styles/global.css        (production Tailwind 4 @theme)
+ *      -> context/local-code/codecave.pro/files/src/styles/global.css
+ *   2. CodeCavePro/brand docs/tokens/*.css       (published brand token files)
+ *      -> context/github/CodeCavePro-brand/files/docs/tokens/
+ *   3. https://codecave.gay                      (live site, measured steps)
+ *
+ * Two layers. The raw ramps (brand violet + gray, verbatim from the site's
+ * 2026 palette rebuild) exist ONLY so the semantic names have somewhere to
+ * point. Consume the SEMANTIC layer. Never hard-code a hex.
+ *
+ * Link this file and the tokens are live on :root — there is no provider,
+ * no theme object, and no component bundle. See SKILL.md.
+ * ========================================================================== */
+
+/* ---------------------------------------------------------------------------
+ * Font faces
+ *
+ * PROVENANCE NOTE — this differs from production on purpose.
+ * codecave.pro ships exactly ONE real cut (Satoshi-Regular.ttf, weight 400)
+ * and lets the browser synthesize 300 and 700. This package ships the real
+ * Satoshi cuts captured in the brand asset upload, so bound weights render
+ * genuinely rather than faux-bolded. Designs built here will look very
+ * slightly tighter at 700 than the live site does today.
+ * ------------------------------------------------------------------------ */
+
+@font-face {
+  font-family: Satoshi;
+  src: url("./fonts/Satoshi-Light.woff2") format("woff2"),
+       url("./fonts/Satoshi-Light.woff") format("woff");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Satoshi;
+  src: url("./fonts/Satoshi-Regular.woff2") format("woff2"),
+       url("./fonts/Satoshi-Regular.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Satoshi;
+  src: url("./fonts/Satoshi-Italic.woff2") format("woff2"),
+       url("./fonts/Satoshi-Italic.woff") format("woff");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Satoshi;
+  src: url("./fonts/Satoshi-Medium.woff2") format("woff2"),
+       url("./fonts/Satoshi-Medium.woff") format("woff");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Satoshi;
+  src: url("./fonts/Satoshi-Bold.woff2") format("woff2"),
+       url("./fonts/Satoshi-Bold.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Satoshi;
+  src: url("./fonts/Satoshi-Black.woff2") format("woff2"),
+       url("./fonts/Satoshi-Black.woff") format("woff");
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+:root {
+  /* =========================================================================
+   * RAW RAMPS — verbatim from global.css :root after the 2026 palette
+   * rebuild. A violet brand ramp, a gray ramp, and single-use accents.
+   * Do not consume directly except where noted (glow-25 is the glow-button
+   * fill; progress-0 is the gradient mid; shadow-0 seeds the section glow).
+   * ====================================================================== */
+
+  /* ---- Brand (violet) ---- */
+  --color-brand-25:  #E8E6F0;  /* near-white tint — gradient endpoint         */
+  --color-brand-50:  #BBB9CB;
+  --color-brand-100: #B8AFDB;
+  --color-brand-200: #B19AFE;  /* hover foreground                            */
+  --color-brand-300: #735CAB;
+  --color-brand-400: #5F3ABD;  /* feature-card ring mid-stop (was cyan)       */
+  --color-brand-500: #5F20FE;  /* ACTION — links, borders, eyebrows           */
+  --color-brand-600: #4705ED;
+  --color-brand-700: #4004AF;  /* primary button hover; tertiary border hover */
+  --color-brand-800: #1B0D4E;  /* text ON the glow button; outline hover      */
+  --color-brand-900: #1E113B;  /* primary button active; secondary fill       */
+  --color-brand-950: #0A0A0B;  /* THE PAGE — a neutral black kept in the
+                                  brand ramp; see WEBSITE-REVIEW.md sect. 5   */
+
+  /* ---- Gray ---- */
+  --color-gray-50:   #F4F4F6;  /* headings, body text                         */
+  --color-gray-100:  #DCDCE5;
+  --color-gray-200:  #D5D5DD;  /* long-form body copy                         */
+  --color-gray-300:  #C7C7DB;  /* secondary body, lighter                     */
+  --color-gray-400:  #A3A3C2;
+  --color-gray-500:  #9595BB;  /* secondary body, placeholders                */
+  --color-gray-600:  #6B6699;  /* neutral — muted metadata, LARGE TEXT ONLY   */
+  --color-gray-700:  #2B2848;  /* borders / quaternary surface                */
+  --color-gray-800:  #232339;  /* surface hover                               */
+  --color-gray-900:  #1C1C27;  /* tertiary surface                            */
+  --color-gray-950:  #15151E;
+  --color-gray-1000: #050505;  /* one dark section ground ("failureproof")    */
+  --color-gray-1100: #0F0F15;  /* card surface — NOTE: lighter than gray-1000;
+                                  the ramp is non-monotonic past 950          */
+
+  /* ---- Single-use accents (global.css calls them "once used") ---- */
+  --color-glow-25:    #9980FF; /* GLOW BUTTON FILL (takes dark text)          */
+  --color-shadow-0:   #281470; /* the upward section glow                     */
+  --color-progress-0: #8252FC; /* gradient mid — .rule / .progress            */
+
+  /* ---- Technology-card wash — the only place cyan survives ---- */
+  --color-technology-gradient-0:  #077689; /* deep cyan                       */
+  --color-technology-gradient-25: #1A0452;
+  --color-technology-gradient-50: #070312;
+
+  /* ---- Error ramp ---- */
+  --color-error-100: #FE9A9A;
+  --color-error-200: #FE2020;
+  --color-error-300: #B42318;
+  --color-error-400: #CA1400;
+
+  /* =========================================================================
+   * SEMANTIC LAYER — use these. Mapping verbatim from the production @theme.
+   * ====================================================================== */
+  --color-heading:               var(--color-gray-50);
+  --color-action:                var(--color-brand-500);
+  --color-neutral:               var(--color-gray-600);
+  --color-hovered:               var(--color-brand-200);
+  --color-outline-primary-hover: var(--color-brand-800);
+
+  --color-body-primary:          var(--color-gray-50);
+  --color-text-body-primary:     var(--color-gray-200); /* long-form copy     */
+  --color-body-secondary:        var(--color-gray-500);
+  --color-body-secondary-lighter:var(--color-gray-300);
+
+  --color-surface-primary:       var(--color-brand-950);
+  --color-surface-primary-transparent: hsl(from var(--color-surface-primary) h s l / 0.3);
+  --color-surface-primary-hover: var(--color-gray-800);
+  --color-surface-secondary:     var(--color-gray-1100);
+  --color-surface-tertiary:      var(--color-gray-900);
+  --color-surface-quaternary:    var(--color-gray-700);
+
+  --color-failureproof-0:        var(--color-gray-1000);
+  --color-default-transparent:   var(--color-gray-100);
+  --color-error:                 var(--color-error-300);
+
+  /* ---- Brand gradient — violet to near-white, left to right.
+   * The mid stop is the once-used progress accent (#8252FC), NOT brand-300:
+   * the rebuilt ramp's brand-300 (#735CAB) is a different, muted violet. ---- */
+  --gradient-brand: linear-gradient(
+    to right,
+    var(--color-brand-500) 0%,
+    var(--color-progress-0) 60%,
+    var(--color-brand-200) 75%,
+    var(--color-brand-25) 100%
+  );
+
+  /* =========================================================================
+   * TYPOGRAPHY
+   * One family. Named heading sizes come from the production @theme block;
+   * the remaining steps are measured from the live site.
+   * ====================================================================== */
+  --font-sans: Satoshi, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+               "Helvetica Neue", "Noto Sans", Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+               "Liberation Mono", "Courier New", monospace;
+
+  --text-heading-lg: 3.5rem;               /* 56px — hero                   */
+  --text-heading-lg--line-height: 130%;
+  --text-heading-md: 2.75rem;              /* 44px — section heading        */
+  --text-heading-md--line-height: 115%;
+  --text-heading-sm: 2rem;                 /* 32px — eyebrow + lead pair    */
+  --text-heading-sm--line-height: 110%;
+
+  /* Named for the thing, not for a t-shirt size — the same rule as RADIUS
+   * below, and here for the same reason rather than for symmetry.
+   *
+   * These were `--text-lg`, `--text-sm` and `--text-base`, which are ALSO
+   * Tailwind default theme names, at 1.125rem, 0.875rem and 1rem. Tailwind
+   * declares its theme inside `@layer theme` and this file declares in a plain
+   * :root, and unlayered CSS beats any cascade layer regardless of source
+   * order — so the collision was not two declarations racing, it was this file
+   * silently and unconditionally winning. Importing the stylesheet into a
+   * Tailwind app resized every `text-lg` and `text-sm` in it, with no warning
+   * anywhere; codecave.pro alone uses those two utilities 72 times across 37
+   * files. CCWEB2-323.
+   *
+   * The old scale was also offset by one step from Tailwind's, which is what
+   * made it dangerous rather than merely wrong: `--text-caption` is 0.875rem,
+   * exactly Tailwind's `text-sm`. Every value looked plausible.
+   *
+   * `md` stays a size word only because Tailwind has no `--text-md` default.
+   * That is luck, not design, and `npm run check:collisions` is what notices
+   * if it stops being true. */
+  --text-stat:    2.25rem;   /* 36px / 40px — stat figures                  */
+  --text-subhead: 1.5rem;    /* 24px / 32px — subsection heading            */
+  --text-md:      1.25rem;   /* 20px / 28px — intro copy                    */
+  --text-label:   1.125rem;  /* 18px / 28px — names, labels                 */
+  --text-body:    1rem;      /* 16px / 24px — body, buttons                 */
+  --text-caption: 0.875rem;  /* 14px / 20px — captions, form labels         */
+
+  --leading-stat:    2.5rem;
+  --leading-subhead: 2rem;
+  --leading-md:      1.75rem;
+  --leading-label:   1.75rem;
+  --leading-body:    1.5rem;
+  --leading-caption: 1.25rem;
+
+  --font-weight-regular: 400;
+  --font-weight-bold: 700;
+
+  /* =========================================================================
+   * RADIUS — the loudest brand signal. Small corners read as off-brand.
+   * ====================================================================== */
+  /* Named for the thing, not for a t-shirt size. `--radius-sm` / `--radius-md`
+   * are also Tailwind default theme names at DIFFERENT values (0.25rem and
+   * 0.375rem), so a component authored against one system and rendered in the
+   * other silently changed shape — see the checkbox note further down. The
+   * remaining six radii were already semantic; these two were the only ones
+   * that could collide, and now they cannot. */
+  --radius-control-sm:0.25rem;  /*   4px — the 16px checkbox box ONLY       */
+  --radius-control:   0.5rem;   /*   8px — inputs, small chips              */
+  --radius-tile:      0.75rem;  /*  12px — inline chips, icon tiles         */
+  --radius-card:      1.5rem;   /*  24px — DEFAULT card, dominant sitewide  */
+  --radius-article:   2.25rem;  /*  36px — article / insight cards          */
+  --radius-custom:    2.75rem;  /*  44px — feature cards (from @theme)      */
+  --radius-section:   4rem;     /*  64px — section panel, <768px            */
+  --radius-section-md:7.5rem;   /* 120px — section panel, >=768px           */
+  --radius-pill:      9999px;   /* buttons, pills, avatars                  */
+
+  /* =========================================================================
+   * LAYOUT AND RHYTHM
+   * ====================================================================== */
+  --max-width-desktop: 1280px;
+  --breakpoint-sm: 457px;
+
+  --gutter-base: 0.5rem;   /* <768px  */
+  --gutter-md:   1rem;     /* >=768px */
+  --gutter-xl:   2rem;     /* >=1280px */
+
+  --section-padding-top: 12.5rem;   /* 200px */
+  --section-padding-bottom: 7.5rem; /* 120px */
+  --card-padding: 2rem 2rem 3rem;   /* heavier bottom seats a footer action */
+
+  --control-height: 3rem;           /* 48px — every button and pill         */
+  --input-height: 4rem;             /* 64px — floating-label text input     */
+
+  /* =========================================================================
+   * ELEVATION — CODECAVE's light comes from BELOW.
+   * Never substitute a conventional downward drop shadow for --shadow-section.
+   * ====================================================================== */
+  --shadow-section:
+    0 -64px 64px 0 hsl(from var(--color-shadow-0) h s l / 0.20),
+    0 -10px 24px 0 hsl(from var(--color-shadow-0) h s l / 0.10),
+    0 -6px  6px 0 hsl(from var(--color-shadow-0) h s l / 0.08);
+
+  /* The GlowButton's own halo — VERBATIM from common/GlowButton.vue.
+   * These three hues are measured production literals and deliberately are NOT
+   * ramp steps: #7A58FF and #5B34FA sit between the progress accent and the
+ * action violet, and
+   * #4F22FF is bluer than the action violet. Rounding them to the nearest token
+   * visibly changes the halo, which is the brand's most recognisable edge. */
+  --shadow-glow-button:
+    0 0 64px 0 #7A58FFA8,
+    0 0 16px 0 #4F22FFA6,
+    0 0 4px 2px #5B34FA;
+
+  /* Focused input halo (source: common/InputText.vue) */
+  --shadow-input-focus:
+    0 0 16px 0 hsl(from var(--color-brand-500) h s l / 0.5),
+    0 0 4px  0 hsl(from var(--color-brand-500) h s l / 0.6);
+  --shadow-input-error:
+    0 0 16px 0 hsl(from var(--color-error-200) h s l / 0.5),
+    0 0 4px  0 hsl(from var(--color-error-100) h s l / 0.6);
+
+  --transition-base: 200ms ease;
+  --transition-slow: 500ms ease;
+  /* Tailwind's `transition-colors`, which is what every button in production
+   * actually carries — 150ms, not the 200ms used elsewhere in this file. */
+  --transition-colors: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ---------------------------------------------------------------------------
+ * Baseline — CODECAVE is dark-first. Near-black page, near-white text.
+ * ------------------------------------------------------------------------ */
+
+html {
+  background: var(--color-surface-primary);
+}
+
+body {
+  margin: 0;
+  background: var(--color-surface-primary);
+  color: var(--color-body-primary);
+  font-family: var(--font-sans);
+  font-size: var(--text-body);
+  line-height: var(--leading-body);
+  -webkit-font-smoothing: antialiased;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: var(--color-heading);
+  font-weight: var(--font-weight-bold);
+  margin: 0;
+}
+
+h1 { font-size: var(--text-heading-lg); line-height: var(--text-heading-lg--line-height); }
+h2 { font-size: var(--text-heading-md); line-height: var(--text-heading-md--line-height); }
+h3 { font-size: var(--text-heading-sm); line-height: var(--text-heading-sm--line-height); }
+
+a { color: var(--color-action); text-underline-offset: 0.2em; }
+a:hover { color: var(--color-hovered); }
+
+/* Every focusable element gets a visible ring. */
+:focus-visible {
+  outline: 2px solid var(--color-hovered);
+  outline-offset: 2px;
+}
+
+/* ---------------------------------------------------------------------------
+ * Layout primitives — verbatim behaviour from the production stylesheet.
+ * ------------------------------------------------------------------------ */
+
+.page-container {
+  width: 100%;
+  min-height: 100%;
+  margin: 0 auto;
+  padding-left: var(--gutter-base);
+  padding-right: var(--gutter-base);
+}
+
+@media (min-width: 768px) {
+  .page-container {
+    padding-left: var(--gutter-md);
+    padding-right: var(--gutter-md);
+  }
+}
+
+@media (min-width: 1280px) {
+  .page-container {
+    max-width: var(--max-width-desktop);
+    padding-left: var(--gutter-xl);
+    padding-right: var(--gutter-xl);
+  }
+}
+
+.section-container {
+  position: relative;
+  z-index: 50;
+  background: var(--color-surface-primary);
+  border-radius: var(--radius-section);
+  box-shadow: var(--shadow-section);
+}
+
+@media (min-width: 768px) {
+  .section-container { border-radius: var(--radius-section-md); }
+}
+
+/* ---------------------------------------------------------------------------
+ * The eyebrow — the system's one typographic signature.
+ * Bold violet line over a larger light lead line. Opens nearly every section.
+ * Source: services/heading.astro, homepage/expertise.astro
+ * ------------------------------------------------------------------------ */
+
+.eyebrow {
+  display: block;
+  color: var(--color-action);
+  font-weight: var(--font-weight-bold);
+}
+
+.lead {
+  display: block;
+  color: var(--color-heading);
+  font-weight: var(--font-weight-bold);
+}
+
+/* ---------------------------------------------------------------------------
+ * Accessibility — motion is slow and continuous, and always collapses.
+ * ------------------------------------------------------------------------ */
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* ===========================================================================
+ * COMPONENT LAYER
+ * Geometry, color and state pairs transcribed from the production Vue/Astro
+ * components captured in source_examples/. Each block names its source file.
+ * ======================================================================== */
+
+/* ---------------------------------------------------------------------------
+ * Buttons — source: source_examples/common/Button.vue
+ * Every control is a 48px pill: min-h-12 px-6 py-1 rounded-full font-bold.
+ * ONE solid fill per action. Everything else is bordered, ghost or text.
+ *
+ * min-height, not height, because that is what production does: Button.vue
+ * puts `min-h-12` on the shared base class and `h-11` on two variants, and
+ * min-height wins — every button is 48px and the h-11 is dead (CCWEB2-319).
+ * Transcribing the RESULT rather than the declarations also survives a label
+ * that wraps, which a fixed height would clip.
+ * ------------------------------------------------------------------------ */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: fit-content;
+  max-width: 100%;
+  min-height: var(--control-height);
+  padding: 0.25rem 1.5rem;
+  border: 0;
+  border-radius: var(--radius-pill);
+  background: none;
+  color: var(--color-body-primary);
+  font-family: var(--font-sans);
+  font-size: var(--text-body);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--leading-body);
+  text-decoration: none;
+  cursor: pointer;
+  transition: color var(--transition-colors),
+              background-color var(--transition-colors),
+              border-color var(--transition-colors);
+}
+
+/* Solid violet — form submits and in-card confirmations. */
+.btn-primary            { background: var(--color-brand-500); }
+.btn-primary:hover      { background: var(--color-brand-700); }
+.btn-primary:active     { background: var(--color-brand-900); }
+
+/* Deep-violet fill — the quiet neighbour of a primary. Source fills with
+ * brand-900 (#1E113B) and hovers to the tertiary surface. */
+.btn-secondary          { background: var(--color-brand-900); }
+.btn-secondary:hover    { background: var(--color-surface-tertiary); }
+
+/* Bordered — the workhorse. "Learn more" everywhere on the site.
+ * The border hovers DOWN to brand-700 (#4004AF, ~1.75:1 on the page): the
+ * outline recedes rather than brightening. This is what production ships and
+ * the label (#F4F4F6) never changes, so text contrast is untouched.
+ * WEBSITE-REVIEW.md sect. 4 flags the direction for a designer decision. */
+.btn-tertiary           { border: 1px solid var(--color-brand-500); }
+.btn-tertiary:hover     { border-color: var(--color-brand-700); }
+
+/* Ghost / text / inline link — nav items and tertiary entry points.
+ * Only .btn-ghost re-declares font-bold in Button.vue; the text and link
+ * variants ride the inherited regular weight. */
+.btn-ghost              { height: auto; padding: 0.5rem 1.5rem;
+                          color: var(--color-body-primary); }
+.btn-ghost:hover,
+.btn-ghost:active       { color: var(--color-hovered); }
+
+.btn-text               { height: auto; padding: 0;
+                          font-weight: var(--font-weight-regular);
+                          color: var(--color-body-secondary-lighter); }
+.btn-text:hover,
+.btn-text:active        { color: var(--color-hovered); }
+
+.btn-link               { height: auto; padding: 0;
+                          font-weight: var(--font-weight-regular);
+                          color: var(--color-hovered);
+                          text-decoration: underline; }
+
+/* Disabled is the ONLY state permitted to reduce contrast. */
+.btn:disabled,
+.btn[aria-disabled="true"],
+.btn-disabled           { opacity: 0.2; cursor: not-allowed; }
+
+/* ---------------------------------------------------------------------------
+ * Glow button — source: source_examples/common/GlowButton.vue
+ * The single highest-intent CTA. Lighter violet field (#9980FF) with the only
+ * dark text in the system, wrapped in a violet halo. At most ONE per action:
+ * a long page may repeat it once at the end, never twice in a viewport.
+ * ------------------------------------------------------------------------ */
+
+.btn-glow {
+  position: relative;
+  overflow: hidden;
+  background: var(--color-glow-25);
+  color: var(--color-brand-800);
+  box-shadow: var(--shadow-glow-button);
+  transition: transform var(--transition-slow);
+}
+
+/* No hover fill. The fill stays #9980FF in every state — the response to the
+ * pointer is the highlight travelling under it, not a colour swap. */
+.btn-glow:active { transform: scale(0.98); }
+
+/* The travelling highlight. Production drives x/y with GSAP quickTo on
+ * pointermove; here the resting position (20% / 50%) is the default and a host
+ * may animate it by writing --glow-x, as brand-kit.html does. */
+.btn-glow::after {
+  content: "";
+  position: absolute;
+  top: -50%;
+  bottom: -50%;
+  left: var(--glow-x, 20%);
+  z-index: 0;
+  width: 50%;
+  transform: translateX(-50%);
+  pointer-events: none;
+  filter: blur(12px);
+  background: radial-gradient(ellipse at left center,
+    #FFFFFF 27.88%,
+    rgba(223, 212, 249, 0.76) 51.92%,
+    rgba(153, 128, 255, 0) 100%);
+}
+
+.btn-glow > span { position: relative; z-index: 2; user-select: none; }
+
+/* The edge bloom. Two blurred radial fields sit OUTSIDE the pill, 8px past each
+ * end, which is why the button is clipped (overflow: hidden) but the bloom is
+ * not — in GlowButton.vue they are siblings of the <a>, not children. The left
+ * one burns at rest and the right one is dark; production cross-fades them from
+ * pointer X across the outer 10% of the width. Wrap the button to get them:
+ *
+ *   <span class="btn-glow-field">
+ *     <a class="btn btn-glow" href="..."><span>Label</span></a>
+ *   </span>
+ *
+ * A host may drive --edge-left / --edge-right on the wrapper to reproduce the
+ * cross-fade; without JS the pair renders the resting state exactly. */
+.btn-glow-field { position: relative; display: inline-block; }
+
+.btn-glow-field::before,
+.btn-glow-field::after {
+  content: "";
+  position: absolute;
+  z-index: 0;
+  top: 50%;
+  width: 100%;
+  height: 80%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  filter: blur(12px);
+  background: radial-gradient(55.23% 55.23% at 50% 50%,
+    #FFFFFF 27.88%,
+    rgba(223, 212, 249, 0.762963) 51.92%,
+    rgba(153, 128, 255, 0) 100%);
+  transition: opacity var(--transition-base);
+}
+
+.btn-glow-field::before { left: -0.5rem;  opacity: var(--edge-left, 1); }
+.btn-glow-field::after  { right: -0.5rem; opacity: var(--edge-right, 0); }
+
+.btn-glow-field > .btn-glow { position: relative; z-index: 1; }
+
+/* ---------------------------------------------------------------------------
+ * Cards — sources: homepage/projects.astro, common/ArticlePreview.vue,
+ *                  homepage/technology-card.vue
+ * Depth is never built from surface contrast: the card sits ONE narrow step
+ * off the page (#0F0F15 on #0A0A0B). Radius and border carry the separation.
+ * ------------------------------------------------------------------------ */
+
+.card {
+  box-sizing: border-box;
+  background: var(--color-surface-secondary);
+  border: 1px solid var(--color-surface-quaternary);
+  border-radius: var(--radius-card);
+  padding: var(--card-padding);        /* heavier bottom seats a footer action */
+  color: var(--color-body-primary);
+}
+
+.card-article { border-radius: var(--radius-article); }
+
+/* Feature card — gradient hairline drawn with mask-composite, blurred
+ * backdrop, no fill. Source: homepage/technology-card.vue.
+ * Since the rebuild brand-400 is violet (#5F3ABD), so the ring reads violet
+ * end to end; cyan survives only in the wash tokens above. */
+.card-feature {
+  position: relative;
+  box-sizing: border-box;
+  border: 0;
+  border-radius: var(--radius-custom);
+  padding: 2rem;
+  backdrop-filter: blur(14px);
+  background: linear-gradient(
+      hsl(from var(--color-technology-gradient-25) h s l / 0.1),
+      hsl(from var(--color-technology-gradient-0) h s l / 0.1),
+      hsl(from var(--color-technology-gradient-50) h s l / 0.1)) border-box;
+}
+
+.card-feature::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  border: 1px solid transparent;
+  pointer-events: none;
+  background: linear-gradient(
+      hsl(from var(--color-brand-500) h s l / 0.35),
+      hsl(from var(--color-brand-400) h s l / 0.675),
+      var(--color-brand-500)) border-box;
+  mask: linear-gradient(#000, #000) border-box,
+        linear-gradient(#000, #000) padding-box;
+  mask-composite: subtract;
+  -webkit-mask-composite: destination-out;
+}
+
+/* Static chip (tag) — source: project/project-chip.astro.
+ * The FORM chips are selectable — see .checkbox-chip further down. */
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--radius-tile);
+  background: var(--color-surface-secondary);
+  color: var(--color-body-primary);
+  font-size: var(--text-caption);
+  line-height: var(--leading-caption);
+}
+
+/* ---------------------------------------------------------------------------
+ * Text input — source: source_examples/common/InputText.vue
+ * 64px tall, 8px radius (one of only two small radii in the system), a bold
+ * 14px floating label seated in the top-left, and a violet focus halo instead
+ * of an outline. Filled, hovered and focused are all distinct.
+ * ------------------------------------------------------------------------ */
+
+.field { position: relative; width: 100%; }
+
+.field > label {
+  position: absolute;
+  top: 0.75rem;
+  left: 0.75rem;
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+  color: var(--color-heading);
+  font-size: var(--text-caption);
+  font-weight: var(--font-weight-bold);
+  pointer-events: none;
+}
+
+.field > label .required { color: var(--color-action); }
+
+.field input,
+.field textarea {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 1.75rem 0.75rem 0.75rem;
+  border: 0;
+  border-radius: var(--radius-control);
+  background: var(--color-surface-secondary);
+  color: var(--color-hovered);
+  font-family: var(--font-sans);
+  font-size: var(--text-body);
+  line-height: var(--leading-body);
+  transition: background-color var(--transition-base),
+              box-shadow var(--transition-base);
+}
+
+/* No pinned height — InputText.vue has none. --input-height (64px) emerges
+ * from the padding: 28px above one 24px text line, 12px below. */
+
+.field textarea {
+  min-height: 7.5rem;
+  padding-top: 2rem;
+  resize: vertical;
+}
+
+.field input::placeholder,
+.field textarea::placeholder {
+  color: var(--color-body-secondary);
+  font-size: var(--text-caption);
+}
+
+/* Chrome autofill would repaint the field; the source component overrides
+ * it (InputText.vue scoped style) and so does the port. */
+.field input:-webkit-autofill {
+  box-shadow: 0 0 0 1000px var(--color-surface-tertiary) inset;
+  -webkit-text-fill-color: var(--color-heading);
+}
+
+.field input:hover,
+.field textarea:hover { background: var(--color-surface-tertiary); }
+
+.field input:focus,
+.field textarea:focus {
+  outline: none;
+  background: var(--color-surface-tertiary);
+  box-shadow: var(--shadow-input-focus);
+}
+
+.field.is-error input,
+.field.is-error textarea { color: var(--color-error-100);
+                           box-shadow: var(--shadow-input-error); }
+
+.field .error-message {
+  display: block;
+  margin-top: 0.375rem;
+  color: var(--color-error-100);
+  font-size: var(--text-caption);
+}
+
+/* Checkbox — source: source_examples/common/Checkbox.vue
+ * 24px, 8px radius, 2px violet-black border that brightens to --color-action. */
+.checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+  color: var(--color-body-primary);
+  font-size: var(--text-caption);
+  cursor: pointer;
+}
+
+.checkbox input {
+  appearance: none;
+  -webkit-appearance: none;
+  display: grid;
+  place-content: center;
+  /* The box is a fixed square, so it must not shrink. Checkbox.vue sizes it
+   * with `w-6 h-6` and nothing else, and a Tailwind width is not a floor: put
+   * a label long enough to wrap next to it and the flex item gives up width
+   * while keeping its height, so the box renders as a tall rounded slot
+   * instead of a square. Every consumer with a sentence-length label hits it.
+   * Filed against the source in WEBSITE-REVIEW.md sect. 4. */
+  flex: none;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin: 0;
+  border: 2px solid var(--color-outline-primary-hover);
+  /* The control radius, same as every other input and small chip. This used to
+   * be a 4px literal with a long apology attached: Checkbox.vue read
+   * `var(--radius-sm)`, the site declared no such name, and the box quietly
+   * took Tailwind's 0.25rem default. Nobody had chosen 4px. The site now
+   * declares `--radius-control: 0.5rem` itself (CCWEB2-313), so the specimen
+   * and the site agree on one value under one name and the divergence is
+   * gone. */
+  border-radius: var(--radius-control);
+  cursor: pointer;
+  transition: border-color var(--transition-base),
+              background-color var(--transition-base);
+}
+
+.checkbox input:hover   { border-color: var(--color-action); }
+.checkbox input:checked { background: var(--color-action);
+                          border-color: var(--color-action); }
+
+.checkbox input::before {
+  content: "";
+  width: 0.75em;
+  height: 0.75em;
+  transform: scale(0);
+  transition: transform var(--transition-base) ease-in-out;
+  background: var(--color-heading);
+  clip-path: polygon(14% 52%, 0 66%, 39% 100%, 100% 20%, 85% 8%, 37% 72%);
+}
+
+.checkbox input:checked::before { transform: scale(1); }
+
+/* Chip checkbox — Checkbox.vue variant="secondary" size="small": the services
+ * and budget pickers on the contact form. The chip surface IS the label; the
+ * box is 16px and swaps its 2px border for an outline that disappears when
+ * checked, exactly as the Tailwind classes in source read. */
+.checkbox-chip {
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--radius-control);
+  background: var(--color-surface-secondary);
+}
+
+.checkbox-chip input {
+  width: 1rem;
+  height: 1rem;
+  /* The -sm step, not --radius-control. The box is 16px, so 8px would be
+   * exactly half its side: a perfect circle, i.e. a radio button, i.e.
+   * pick-one rendering for a pick-any control. The surrounding pill keeps 8px
+   * (`rounded-lg` in source), so the chip reads as a rounded tile holding a
+   * small square. Checkbox.vue keys the same distinction off `data-size`. */
+  border-radius: var(--radius-control-sm);
+  border: 0;
+  outline: 2px solid var(--color-surface-quaternary);
+  transition: outline-color var(--transition-base),
+              background-color var(--transition-base);
+}
+
+.checkbox-chip input:hover   { outline-color: var(--color-action); }
+.checkbox-chip input:checked { outline: none; background: var(--color-action); }
+.checkbox-chip input::before { width: 0.5em; height: 0.5em; }
+
+/* ---------------------------------------------------------------------------
+ * Eyebrow + lead pair and stat figures
+ * Sources: services/heading.astro, homepage/expertise.astro, workflow/*.astro
+ * ------------------------------------------------------------------------ */
+
+.eyebrow-lead              { display: grid; gap: 0.25rem; }
+.eyebrow-lead .eyebrow     { font-size: var(--text-heading-sm);
+                             line-height: var(--text-heading-sm--line-height); }
+.eyebrow-lead .lead        { font-size: var(--text-heading-sm);
+                             line-height: var(--text-heading-sm--line-height);
+                             font-weight: var(--font-weight-regular);
+                             color: var(--color-body-secondary-lighter); }
+
+.stat        { display: grid; gap: 0.25rem; }
+.stat-figure { color: var(--color-heading);
+               font-size: var(--text-stat);
+               line-height: var(--leading-stat);
+               font-weight: var(--font-weight-bold); }
+.stat-label  { color: var(--color-body-secondary-lighter);
+               font-size: var(--text-caption);
+               line-height: var(--leading-caption); }
+
+.divider { height: 1px; border: 0; margin: 0;
+           background: var(--color-surface-quaternary); }
+
+/* ---------------------------------------------------------------------------
+ * Rule and progress — the gradient line
+ * Source: CodeCavePro/brand docs/index.html (.rule), carried forward from the
+ * previously published brand site. It is the one element the earlier docs had
+ * that this system did not, and it is kept deliberately.
+ *
+ * This is the ONLY place --gradient-brand is permitted as a field rather than
+ * as display type: a 4px pill running violet (#5F20FE) to near-white (#E8E6F0)
+ * left to right, capped at 320px. The cap matters — stretched across a full
+ * container the gradient flattens into a pale wash and stops reading as brand.
+ *
+ * .rule      static accent under a heading; carries no value
+ * .progress  determinate bar; the fill width comes from --progress
+ * ------------------------------------------------------------------------ */
+
+.rule {
+  height: 4px;
+  max-width: 320px;
+  border: 0;
+  margin: 0;
+  border-radius: var(--radius-pill);
+  background: var(--gradient-brand);
+}
+
+/* The track is a border-step surface, never a lighter fill — same rule as a
+ * card. Depth here comes from the gradient, not from lightening the ground. */
+.progress {
+  height: 4px;
+  width: 100%;
+  max-width: 320px;
+  overflow: hidden;
+  border-radius: var(--radius-pill);
+  background: var(--color-surface-quaternary);
+}
+
+.progress > .progress-value {
+  display: block;
+  height: 100%;
+  width: var(--progress, 0%);
+  border-radius: inherit;
+  background: var(--gradient-brand);
+  /* The gradient is painted at the bar's full width and then revealed, so the
+   * violet end stays anchored at 0% and the near-white end always means done.
+   * Sizing the gradient to the fill instead would show near-white at 5%. */
+  background-size: var(--progress-track-width, 320px) 100%;
+  background-repeat: no-repeat;
+  transition: width var(--transition-slow);
+}
+
+/* Indeterminate — a 40% band sweeping the track. Use only when the work has no
+ * measurable end; a determinate bar is always the better answer. */
+.progress.is-indeterminate > .progress-value {
+  width: 40%;
+  background-size: 100% 100%;
+  animation: progress-sweep 1.6s ease-in-out infinite;
+}
+
+@keyframes progress-sweep {
+  0%   { transform: translateX(-100%); }
+  100% { transform: translateX(250%); }
+}
+
+/* The global reduced-motion collapse above freezes animations at 0.01ms, which
+ * would strand the sweep off-screen. Fall back to a filled, quieter track. */
+@media (prefers-reduced-motion: reduce) {
+  .progress.is-indeterminate > .progress-value {
+    width: 100%;
+    transform: none;
+    opacity: 0.6;
+  }
+}