Your work

/* ===========================================================================
   SKY HUB DESIGN SYSTEM — extracted, de-Tailwinded, ready for a static site.
   ---------------------------------------------------------------------------
   Source of truth (all paths under
   /Volumes/Extreme SSD/SkyBizi/SkyHubWebsite/Website):

     tailwind.config.js                      brand/ink scales, shadows, fonts
     src/index.css                           base layer, surfaces, glass, motion
     src/dashboard/components/Page.jsx       THE page grammar — cards, buttons,
                                             status, empty, loading, ramp
     src/dashboard/Layout.jsx                shell: topbar, sidebar, backdrop
     src/dashboard/components/Glass.jsx      glass primitives, Pill, Stat
     src/pages/Shop.jsx                      marketing/commerce page grammar
     src/pages/shop/EditBuilder.jsx          form/selection-card grammar
     src/components/ui/{Card,Button,StatusPill,SectionHeader,Section}.jsx
                                             OLDER marketing grammar (see §0)

   HOW TO ADOPT: paste this file whole, load it FIRST (before legacy CSS), then
   delete legacy rules as you convert each page. Every value here is literal —
   nothing depends on Tailwind, a build step, or a framework.

   DARK MODE: driven by `class="dark"` on <html>, exactly like Hub
   (src/theme/ThemeProvider.jsx, key `sky-theme`, LIGHT IS THE DEFAULT).
   A `prefers-color-scheme` block is provided but only fires when the user has
   made no explicit choice — set `html.light` to hard-pin light.

   =========================================================================== */


/* ===========================================================================
   §0 — WHICH GRAMMAR TO COPY  (read this before anything else)

   Hub contains TWO complete visual grammars that were built ~a year apart and
   both still ship. They disagree on the accent hue, on the card surface, and
   on the heading font. Do not average them.

   (A) THE CURRENT ONE — "flat card + ink button + sky eyebrow".
       Defined in dashboard/components/Page.jsx and used verbatim by Shop.jsx
       and EditBuilder.jsx. Accent = Tailwind `sky` (#0EA5E9). Card = opaque
       white with a 1px slate ring, NO border, NO blur. Primary button = ink
       (#0F172A), not blue. THIS IS THE TARGET. Everything in §1–§9 below is
       this grammar.

   (B) THE OLDER MARKETING ONE — "surface + brand-400 + gradient text".
       components/ui/Card.jsx + Button.jsx + index.css `.surface*` / `.chip*`.
       Accent = custom `brand.400` (#22BDFF, a different, brighter blue than
       sky-500). Buttons are full-radius sky-filled with a sheen sweep. Still
       used across /products/*, /solutions/*. Preserved here in §10 so a
       legacy page that already looks like this has somewhere to land — but do
       not introduce it into new work.

   Page.jsx states the rules (A) enforces, in its own header comment:
     · one eyebrow accent (sky), no per-page accent roulette
     · one h1 ramp
     · CONTENT SURFACES ARE FLAT — glass is for the shell (topbar/sidebar) only
     · card padding is 16 / 20 / 24px and nothing else
     · errors and emptiness must look DIFFERENT
   =========================================================================== */


/* ===========================================================================
   §1 — TOKENS
   =========================================================================== */

:root {
  color-scheme: light;

  /* ---- 1.1 Page backgrounds -------------------------------------------
     Hub uses three different page grounds. They are not interchangeable. */
  --sky-bg-app:        #FFFFFF;   /* index.css --app-bg; also Shop.jsx      */
  --sky-bg-dashboard:  #F6F9FC;   /* .hub-dashboard — very faint blue cast  */
  --sky-bg-marketing:  #FBFCFD;   /* .sky-home                              */
  --sky-bg-sunken:     #F8FAFC;   /* slate-50 — inset/alternating sections  */
  --sky-bg-sunken-60:  rgba(248, 250, 252, 0.60); /* Shop.jsx video lane    */

  /* ---- 1.2 Surfaces ---------------------------------------------------- */
  --sky-surface:        #FFFFFF;               /* the card. opaque. flat.   */
  --sky-surface-sunken: #F1F5F9;               /* slate-100 — ghost btn, chip */
  --sky-surface-hover:  #E2E8F0;               /* slate-200 — ghost btn hover */

  /* ---- 1.3 Text -------------------------------------------------------- */
  --sky-text:           #0F172A;  /* slate-900 — headings, values, labels   */
  --sky-text-secondary: #475569;  /* slate-600 — body copy, subtitles       */
  --sky-text-muted:     #64748B;  /* slate-500 — hints, meta                */
  --sky-text-faint:     #94A3B8;  /* slate-400 — placeholders, icons, eyebrow-in-card */
  --sky-text-invert:    #FFFFFF;

  /* ---- 1.4 Border / ring ------------------------------------------------
     Hub draws card edges with Tailwind `ring-1`, which is an OUTSET
     box-shadow, NOT a border. It occupies zero layout space. Porting these
     to `border: 1px` grows every card by 2px and breaks the grids. Use the
     --sky-ring-* recipes in §2. */
  --sky-ring:        rgba(226, 232, 240, 0.80); /* ring-slate-200/80        */
  --sky-ring-solid:  #E2E8F0;                   /* slate-200 (marketing)    */
  --sky-ring-hover:  #CBD5E1;                   /* slate-300                */
  --sky-hairline:    #E2E8F0;                   /* dividers                 */
  --sky-hairline-soft: rgba(226, 232, 240, 0.70);

  /* ---- 1.5 Accent ------------------------------------------------------
     ONE accent: sky. #0EA5E9 is literally `--accent` in index.css:682.
     Note the eyebrow/link tone is sky-600, one step DARKER than the fill —
     sky-500 text on white is only ~2.8:1 and Hub never uses it as text. */
  --sky-accent:        #0EA5E9;  /* sky-500  — fills, dots, focus, bars     */
  --sky-accent-strong: #0284C7;  /* sky-600  — accent TEXT, eyebrows, links */
  --sky-accent-deep:   #0369A1;  /* sky-700  — active nav label             */
  --sky-accent-soft:   #38BDF8;  /* sky-400  — dark-mode accent text        */
  --sky-accent-pale:   #7DD3FC;  /* sky-300  — dark-mode fills, gradients   */
  --sky-accent-tint:   rgba(14, 165, 233, 0.10);
  --sky-accent-ring:   rgba(56, 189, 248, 0.35);
  --sky-accent-glow:   rgba(56, 189, 248, 0.30);

  /* Secondary accent — the VIDEO lane only (EditBuilder.jsx, Shop /video).
     Never mix it into the thumbnail/dashboard surface. */
  --sky-violet:        #7C3AED;  /* violet-600 — the video CTA fill         */
  --sky-violet-hover:  #8B5CF6;  /* violet-500                              */
  --sky-violet-ring:   #A78BFA;  /* violet-400 — selected option ring       */
  --sky-violet-tint:   #F5F3FF;  /* violet-50  — selected option fill       */

  /* Discord — a literal third-party brand colour, used at full strength. */
  --sky-discord:    #5865F2;
  --sky-discord-on: #4752C4;     /* Discord blurple text on a white chip    */

  /* ---- 1.6 Semantic status ---------------------------------------------
     From Page.jsx STATUS + Glass.jsx Pill. Dot uses the -400 step, label
     uses the -700 step. Do not use the same value for both. */
  --sky-ok:        #34D399;  --sky-ok-text:      #047857;  /* emerald 400/700 */
  --sky-warn:      #FBBF24;  --sky-warn-text:    #B45309;  /* amber   400/700 */
  --sky-danger:    #FB7185;  --sky-danger-text:  #E11D48;  /* rose    400/600 */
  --sky-neutral:   #94A3B8;  --sky-neutral-text: #475569;  /* slate   400/600 */
  --sky-info:      #38BDF8;  --sky-info-text:    #0369A1;  /* sky     400/700 */
  --sky-danger-bg:   rgba(255, 241, 242, 0.60);  /* rose-50/60  */
  --sky-danger-ring: rgba(254, 205, 211, 0.70);  /* rose-200/70 */

  /* ---- 1.7 Type -------------------------------------------------------- */
  --sky-font-sans:    'Plus Jakarta Sans', 'Outfit', ui-sans-serif, system-ui,
                      -apple-system, sans-serif;
  --sky-font-display: 'Alphakind', 'Plus Jakarta Sans', 'Outfit',
                      ui-sans-serif, system-ui, sans-serif;
  --sky-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular,
                      Menlo, monospace;

  /* ---- 1.8 Radius — five values, and only five ------------------------- */
  --sky-r-sm:   8px;    /* rounded-lg   — menu rows, small chips, kbd       */
  --sky-r-md:   12px;   /* rounded-xl   — BUTTONS, inputs, icon buttons,
                                          nav items, thumbnails, add-ons    */
  --sky-r-lg:   16px;   /* rounded-2xl  — THE CARD. panels. empty state.    */
  --sky-r-xl:   24px;   /* rounded-3xl  — modals, sign-in gate, hero slabs  */
  --sky-r-full: 9999px; /* pills, status chips, CTAs, avatars, progress     */

  /* ---- 1.9 Elevation ---------------------------------------------------
     Flat by default. A resting card has NO shadow — only a ring. Shadow is
     a hover/lift affordance, not decoration. */
  --sky-shadow-none:  none;
  --sky-shadow-card-hover: 0 24px 50px -28px rgba(2, 6, 23, 0.55);
  --sky-shadow-soft:  0 1px 2px rgba(15, 23, 42, 0.03),
                      0 4px 16px -10px rgba(15, 23, 42, 0.06);
  --sky-shadow-lift:  0 2px 4px -1px rgba(15, 23, 42, 0.04),
                      0 16px 36px -16px rgba(15, 23, 42, 0.08);
  --sky-shadow-menu:  0 1px 2px rgba(15, 23, 42, 0.06),
                      0 18px 40px -12px rgba(2, 132, 199, 0.25);
  --sky-shadow-accent: 0 4px 18px -6px rgba(56, 189, 248, 0.35);
  --sky-shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* ---- 1.10 Spacing rhythm --------------------------------------------- */
  --sky-pad-sm:   16px;  /* Card pad="sm"  (p-4) — dense rows, add-ons      */
  --sky-pad-md:   20px;  /* Card pad="md"  (p-5) — THE DEFAULT              */
  --sky-pad-lg:   24px;  /* Card pad="lg"  (p-6) — feature cards            */
  --sky-gap-page: 24px;  /* space-y-6 between page blocks                   */
  --sky-gap-grid: 16px;  /* gap-4 between cards                             */
  --sky-gap-tile: 12px;  /* gap-3 between thumbnails / option cards         */
  --sky-gap-inline: 8px; /* gap-2 between buttons in a row                  */
  --sky-gap-field: 28px; /* space-y-7 between form questions (EditBuilder)  */

  /* ---- 1.11 Widths ------------------------------------------------------ */
  --sky-w-shell:    1600px; /* dashboard shell (Layout.jsx)                 */
  --sky-w-content:  1240px; /* Shop.jsx / EditBuilder — commerce pages      */
  --sky-w-marketing:1280px; /* max-w-7xl — marketing sections               */
  --sky-w-prose:    672px;  /* max-w-2xl — section header measure           */
  --sky-w-sidebar:  240px;  /* 260px at >=1280px                            */
  --sky-w-rail:     72px;   /* collapsed sidebar                            */
  --sky-h-topbar:   64px;
  --sky-gutter:     16px;   /* px-4 mobile                                  */
  --sky-gutter-lg:  24px;   /* lg:px-6 desktop                              */

  /* ---- 1.12 Motion — four easings, four durations. There is no fifth.
     (index.css §1, the "Ballast" system.) --------------------------------- */
  --ease-settle: cubic-bezier(.16, 1, .3, 1);      /* entrances            */
  --ease-drag:   cubic-bezier(.22, 1, .36, 1);     /* leaving, press       */
  --ease-load:   cubic-bezier(.33, 0, .15, 1);     /* sweeps, belts        */
  --ease-pop:    cubic-bezier(.34, 1.56, .64, 1);  /* elements <=56px ONLY */
  --d-micro: 220ms;  /* icon, badge, dot, chip     */
  --d-comp:  360ms;  /* tile, card, button — hover */
  --d-sect:  560ms;  /* card / text-block entrance */
  --d-mass:  720ms;  /* hero panel entrance        */
}

/* ---- 1.13 Dark mode ------------------------------------------------------
   Hub dark mode is NOT "invert the light tokens". Two things change kind,
   not just value:
     · the card surface stops being a colour and becomes 3% white over the
       backdrop, so the page's radial washes read THROUGH the card;
     · the page base goes to #060A1A (near-black navy), deeper than the
       #0B1220 that index.css declares for --app-bg, because the dashboard
       backdrop paints gradients on top of it.                              */
html.dark {
  color-scheme: dark;

  --sky-bg-app:        #0B1220;
  --sky-bg-dashboard:  #060A1A;
  --sky-bg-marketing:  #0B1220;
  --sky-bg-sunken:     rgba(255, 255, 255, 0.02);
  --sky-bg-sunken-60:  rgba(255, 255, 255, 0.02);

  --sky-surface:        rgba(255, 255, 255, 0.03);
  --sky-surface-sunken: rgba(255, 255, 255, 0.06);
  --sky-surface-hover:  rgba(255, 255, 255, 0.12);

  --sky-text:           #FFFFFF;   /* pure white, NOT slate-100            */
  --sky-text-secondary: #94A3B8;   /* slate-400                            */
  --sky-text-muted:     #94A3B8;
  --sky-text-faint:     #64748B;   /* slate-500                            */
  --sky-text-invert:    #0F172A;

  --sky-ring:        rgba(255, 255, 255, 0.10);
  --sky-ring-solid:  rgba(255, 255, 255, 0.10);
  --sky-ring-hover:  rgba(255, 255, 255, 0.20);
  --sky-hairline:    rgba(255, 255, 255, 0.08);
  --sky-hairline-soft: rgba(255, 255, 255, 0.10);

  --sky-accent:        #0EA5E9;
  --sky-accent-strong: #38BDF8;   /* flips UP one step in dark             */
  --sky-accent-deep:   #7DD3FC;
  --sky-accent-tint:   rgba(56, 189, 248, 0.15);

  --sky-ok-text:      #6EE7B7;    /* emerald-300 */
  --sky-warn-text:    #FCD34D;    /* amber-300   */
  --sky-danger-text:  #FDA4AF;    /* rose-300    */
  --sky-neutral-text: #94A3B8;
  --sky-info-text:    #7DD3FC;
  --sky-danger-bg:   rgba(251, 113, 133, 0.06);
  --sky-danger-ring: rgba(251, 113, 133, 0.20);

  --sky-shadow-card-hover: 0 24px 50px -28px rgba(0, 0, 0, 0.80);
  --sky-shadow-soft:  0 1px 2px rgba(0, 0, 0, 0.25),
                      0 8px 24px -16px rgba(0, 0, 0, 0.40);
  --sky-shadow-lift:  0 4px 10px -4px rgba(0, 0, 0, 0.30),
                      0 20px 48px -20px rgba(0, 0, 0, 0.50);
}

/* Only applies if the user has expressed no preference (no `light`/`dark`
   class on <html>). Hub's pre-paint script in index.html sets the class. */
@media (prefers-color-scheme: dark) {
  html:not(.light):not(.dark) { color-scheme: dark; }
}


/* ===========================================================================
   §2 — BASE
   =========================================================================== */

/* Self-host these. Hub loads Plus Jakarta Sans / Outfit / JetBrains Mono from
   fonts.googleapis.com with a render-blocking <link>; do NOT reproduce that on
   the legacy site, which already has two blocking external stylesheets. Drop
   woff2 files next to the CSS and keep the @font-face here. */
@font-face {
  font-family: 'Alphakind';
  src: url('/fonts/Alphakind.woff2') format('woff2'),
       url('/fonts/Alphakind.otf')   format('opentype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

html { background-color: var(--sky-bg-app); scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sky-font-sans);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  font-feature-settings: 'ss01', 'ss02', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--sky-text);
  background-color: var(--sky-bg-app);
  transition: background-color 300ms ease, color 300ms ease;
}

/* Alphakind on every heading is the global rule in index.css:61.
   EXCEPTION: the homepage sets `.sky-alt` and puts headings back to Plus
   Jakarta Sans ("the homepage reads precise, not playful"). Replicate the
   exception by adding class `sky-alt` to that page's wrapper. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--sky-font-display);
  letter-spacing: -0.015em;
  margin: 0;
}
.sky-alt h1, .sky-alt h2, .sky-alt h3, .sky-alt h4 { font-family: var(--sky-font-sans); }

::selection { background: rgba(34, 189, 255, 0.20); color: #0F172A; }
html.dark ::selection { background: rgba(34, 189, 255, 0.30); color: #FFF; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(56, 189, 248, .45), rgba(56, 189, 248, .18));
  border-radius: var(--sky-r-full);
}

/* THE RING PRIMITIVE. Tailwind's `ring-1` = an outset 1px box-shadow. Use
   this, not `border`, or every card grows 2px and the grids reflow. */
.sky-ring        { box-shadow: 0 0 0 1px var(--sky-ring); }
.sky-ring-strong { box-shadow: 0 0 0 1px var(--sky-ring-hover); }

/* Focus. Hub HAS NO SHARED FOCUS STYLE — controls rely on the UA default and
   several kill it with `outline-none`. This is a defect; do not port it.
   Define it once here and keep it. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--sky-accent);
  outline-offset: 2px;
  border-radius: inherit;
}


/* ===========================================================================
   §3 — TYPE RAMP
   The dashboard ramp from Page.jsx is authoritative. Sizes are literal px
   because Hub writes them literally (`text-[14px]`, `text-[12.5px]`) far more
   often than it uses Tailwind's scale.
   =========================================================================== */

/* Eyebrow — 11px mono, uppercase, wide tracking, accent-strong. Above every
   page title and every section in the sidebar. One accent, always sky. */
.sky-eyebrow {
  font-family: var(--sky-font-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.20em;
  color: var(--sky-accent-strong);
}
/* Quieter variant used inside cards and for group labels (slate, 9.5–10px). */
.sky-eyebrow-quiet {
  font-family: var(--sky-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.20em;
  color: var(--sky-text-muted);
}

/* h1 — page title. ONE ramp. 30px → 36px at >=640px. */
.sky-h1 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--sky-text);
  margin-top: 4px;
}
@media (min-width: 640px) { .sky-h1 { font-size: 36px; } }

/* h1 on a commerce/marketing page — larger, slightly tighter (Shop.jsx). */
.sky-h1-hero {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.03;
  color: var(--sky-text);
  max-width: 19ch;
}
@media (min-width: 640px) { .sky-h1-hero { font-size: 46px; } }

/* h2 — a titled block inside a page. 18px, display face. */
.sky-h2 {
  font-family: var(--sky-font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--sky-text);
}

/* h2 — a top-level page section (Shop "The artwork.", "The video itself."). */
.sky-h2-section {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--sky-text);
}
@media (min-width: 640px) { .sky-h2-section { font-size: 30px; } }

/* h2 — marketing hero. Fluid, from SectionHeader.jsx. */
.sky-h2-display {
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--sky-text);
  text-wrap: balance;
}

/* h3 — a form question / card title. */
.sky-h3 { font-size: 14px; font-weight: 700; color: var(--sky-text); }

/* Body + supporting copy. */
.sky-sub    { font-size: 14px;   color: var(--sky-text-secondary); max-width: 56ch; margin-top: 6px; text-wrap: pretty; }
.sky-body   { font-size: 14px;   color: var(--sky-text-secondary); line-height: 1.6; }
.sky-hint   { font-size: 12.5px; color: var(--sky-text-muted); }
.sky-meta   { font-size: 12px;   color: var(--sky-text-muted); }
.sky-micro  { font-size: 11.5px; color: var(--sky-text-faint); }

/* A number you want read as a number. Every price/KPI in Hub is tabular. */
.sky-numeral {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--sky-text);
}
.sky-numeral-xl { font-size: 44px; line-height: 1; }  /* EditBuilder total  */
.sky-numeral-lg { font-size: 34px; line-height: 1.1; }/* tier price         */
.sky-numeral-md { font-size: 30px; line-height: 1.1; }/* KPI stat           */


/* ===========================================================================
   §4 — LAYOUT
   =========================================================================== */

.sky-shell   { max-width: var(--sky-w-shell);     margin-inline: auto; padding-inline: var(--sky-gutter); }
.sky-wrap    { max-width: var(--sky-w-content);   margin-inline: auto; padding-inline: 20px; }
.sky-wrap-mk { max-width: var(--sky-w-marketing); margin-inline: auto; padding-inline: 24px; }
@media (min-width: 1024px) { .sky-shell { padding-inline: var(--sky-gutter-lg); } }

/* Root rhythm — every page's outermost element. 24px between blocks. */
.sky-page > * + * { margin-top: var(--sky-gap-page); }

/* Page header: eyebrow → title → subtitle, actions pinned right. */
.sky-page-header {
  display: flex; flex-wrap: wrap;
  align-items: flex-end; justify-content: space-between;
  gap: var(--sky-gap-grid);
}
.sky-page-header > .sky-actions { display: flex; align-items: center; gap: var(--sky-gap-inline); flex-shrink: 0; }

/* A titled block. Title row sits 12px above its content. */
.sky-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sky-gap-tile); margin-bottom: var(--sky-gap-tile);
}

/* Marketing section vertical rhythm (Section.jsx VPADDING). */
.sky-section-pad   { padding-block: 96px; }
@media (min-width: 640px)  { .sky-section-pad { padding-block: 128px; } }
@media (min-width: 1024px) { .sky-section-pad { padding-block: 144px; } }
/* Commerce section rhythm (Shop.jsx) — much tighter. */
.sky-section-pad-tight { padding-block: 56px; }

/* Grids. */
.sky-grid-cards { display: grid; gap: var(--sky-gap-grid); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .sky-grid-cards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1280px) { .sky-grid-cards { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.sky-grid-tiles { display: grid; gap: var(--sky-gap-tile); grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 640px)  { .sky-grid-tiles { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1024px) { .sky-grid-tiles { grid-template-columns: repeat(4, minmax(0,1fr)); } }

.sky-divider { height: 1px; width: 100%; background: var(--sky-hairline); border: 0; }


/* ===========================================================================
   §5 — THE CARD
   Page.jsx: `rounded-2xl bg-white dark:bg-white/[0.03]
              ring-1 ring-slate-200/80 dark:ring-white/10`
   Flat. No shadow at rest. No border. No blur. Three padding values.
   =========================================================================== */

.sky-card {
  border-radius: var(--sky-r-lg);
  background: var(--sky-surface);
  box-shadow: 0 0 0 1px var(--sky-ring);
  padding: var(--sky-pad-md);
}
.sky-card--sm { padding: var(--sky-pad-sm); }
.sky-card--lg { padding: var(--sky-pad-lg); }
.sky-card--flush { padding: 0; }           /* card wrapping an image/table  */

/* Interactive card. ONLY ring + shadow move — no translate, no scale. */
.sky-card--interactive {
  transition: box-shadow var(--d-comp) var(--ease-settle);
  cursor: pointer;
}
.sky-card--interactive:hover {
  box-shadow: 0 0 0 1px var(--sky-ring-hover), var(--sky-shadow-card-hover);
}

/* Selected option card (EditBuilder format/tier/add-on tiles). */
.sky-card--selected {
  box-shadow: 0 0 0 1px var(--sky-violet-ring);
  background: var(--sky-violet-tint);
}
html.dark .sky-card--selected { background: rgba(139, 92, 246, 0.10); }

/* Sticky summary rail (EditBuilder total). */
.sky-card--sticky { position: sticky; top: 80px; }

/* Glass — SHELL ONLY: topbar, sidebar, drawers, the sign-in gate. Page.jsx is
   explicit that clicking a flat card and landing on a frosted page "changes
   the surface mid-interaction on the most-travelled click in the product." */
.sky-glass {
  border-radius: var(--sky-r-lg);
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.70),
              0 8px 32px -12px rgba(2, 132, 199, 0.18),
              0 1px 2px rgba(15, 23, 42, 0.04);
}
html.dark .sky-glass {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
              0 16px 40px -16px rgba(0, 0, 0, 0.55),
              0 0 0 1px rgba(56, 189, 248, 0.06);
}
.sky-glass-panel {   /* quieter — nested inside a bigger surface */
  border-radius: var(--sky-r-lg);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65),
              0 6px 24px -16px rgba(2, 132, 199, 0.18);
}
html.dark .sky-glass-panel {
  background: rgba(15, 23, 42, 0.40);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03),
              0 12px 28px -16px rgba(0, 0, 0, 0.55);
}


/* ===========================================================================
   §6 — BUTTONS
   The single most likely thing to get wrong on the port: THE PRIMARY BUTTON
   IS INK, NOT BLUE. It is slate-900 on light and white on dark — it inverts.
   Sky-500 fill is reserved for small secondary CTAs ("Manage plan"); violet
   for the video lane; blurple for Discord.
   =========================================================================== */

.sky-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  height: 40px; padding-inline: 16px;
  border: 0; border-radius: var(--sky-r-md);
  font-family: inherit; font-size: 13px; font-weight: 600;
  line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background-color var(--d-micro) var(--ease-settle),
              opacity var(--d-micro) var(--ease-settle),
              transform 110ms var(--ease-drag);
}
.sky-btn:active   { transform: scale(0.98); }
.sky-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.sky-btn svg      { width: 16px; height: 16px; flex-shrink: 0; }

/* PRIMARY — ink. Inverts in dark mode. */
.sky-btn--primary { background: #0F172A; color: #FFFFFF; }
.sky-btn--primary:hover { opacity: 0.90; }
html.dark .sky-btn--primary { background: #FFFFFF; color: #0F172A; }

/* GHOST — filled slate, no ring. This is Hub's secondary, NOT an outline. */
.sky-btn--ghost { background: var(--sky-surface-sunken); color: #334155; }
.sky-btn--ghost:hover { background: var(--sky-surface-hover); }
html.dark .sky-btn--ghost { background: rgba(255,255,255,0.07); color: #E2E8F0; }
html.dark .sky-btn--ghost:hover { background: rgba(255,255,255,0.12); }

/* OUTLINE — used for tertiary actions on a coloured/photo ground. */
.sky-btn--outline {
  background: transparent; color: var(--sky-text);
  box-shadow: 0 0 0 1px var(--sky-ring);
}
.sky-btn--outline:hover { box-shadow: 0 0 0 1px var(--sky-ring-hover); background: rgba(15,23,42,0.02); }

/* ACCENT — small sky CTA. Pill, 32px, 12px type (PlanCard "Manage plan"). */
.sky-btn--accent { background: var(--sky-accent); color: #FFFFFF; border-radius: var(--sky-r-full); }
.sky-btn--accent:hover { background: var(--sky-accent-soft); }

/* VIDEO — the violet lane CTA. Full-width, 48px, pill, 15px bold. */
.sky-btn--video {
  background: var(--sky-violet); color: #FFFFFF;
  border-radius: var(--sky-r-full); height: 48px; font-size: 15px; font-weight: 700;
}
.sky-btn--video:hover { background: var(--sky-violet-hover); }

/* DISCORD — white chip on blurple, or blurple on white. */
.sky-btn--discord { background: #FFFFFF; color: var(--sky-discord-on); border-radius: var(--sky-r-full); font-weight: 700; }
.sky-btn--discord:hover { background: rgba(255,255,255,0.90); }

/* Size + shape modifiers. */
.sky-btn--sm   { height: 36px; padding-inline: 14px; font-size: 12.5px; }
.sky-btn--lg   { height: 48px; padding-inline: 28px; font-size: 15px; font-weight: 700; }
.sky-btn--pill { border-radius: var(--sky-r-full); }
.sky-btn--icon { width: 40px; height: 40px; padding: 0; }
.sky-btn--block{ width: 100%; }

/* Text link with a trailing arrow — "Order this →". Hub's tertiary action. */
.sky-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 600;
  color: var(--sky-accent-strong); text-decoration: none;
}
.sky-link svg { width: 14px; height: 14px; transition: transform var(--d-micro) var(--ease-settle); }
.sky-link:hover svg { transform: translateX(2px); }


/* ===========================================================================
   §7 — PILLS, CHIPS, STATUS
   =========================================================================== */

/* Status chip: a coloured dot + a coloured label. NO background, NO ring.
   This is the dashboard's status vocabulary (Page.jsx StatusChip). */
.sky-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
}
.sky-status::before { content: ''; width: 6px; height: 6px; border-radius: var(--sky-r-full); background: currentColor; }
.sky-status--open    { color: var(--sky-info-text);    }  /* "Finding your designer" */
.sky-status--open::before    { background: var(--sky-info);    }
.sky-status--active  { color: var(--sky-warn-text);    }  /* "In progress"           */
.sky-status--active::before  { background: var(--sky-warn);    }
.sky-status--done    { color: var(--sky-ok-text);      }  /* "Delivered"             */
.sky-status--done::before    { background: var(--sky-ok);      }
.sky-status--cancel  { color: var(--sky-neutral-text); }  /* "Cancelled"             */
.sky-status--cancel::before  { background: var(--sky-neutral); }

/* THE COPY MATTERS AS MUCH AS THE COLOUR. Page.jsx replaced four disagreeing
   status maps with one. Customer-facing labels are:
     open → "Finding your designer"   claimed → "In progress"
     closed → "Delivered"             deleted → "Cancelled"
   Never show internal roster words ("Unclaimed", "COMPLETED") to a customer. */

/* Pill — a labelled badge with a tint and a ring. Mono, uppercase, 24px tall. */
.sky-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding-inline: 10px;
  border-radius: var(--sky-r-full);
  font-family: var(--sky-font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.14em;
  box-shadow: 0 0 0 1px var(--sky-ring);
  background: var(--sky-surface-sunken); color: #334155;
}
.sky-pill--sky     { background: rgba(224,242,254,0.80); color: #075985; box-shadow: 0 0 0 1px rgba(186,230,253,0.60); }
.sky-pill--ok      { background: rgba(209,250,229,0.80); color: #065F46; box-shadow: 0 0 0 1px rgba(167,243,208,0.60); }
.sky-pill--warn    { background: rgba(254,243,199,0.80); color: #92400E; box-shadow: 0 0 0 1px rgba(253,230,138,0.60); }
.sky-pill--danger  { background: rgba(255,228,230,0.80); color: #9F1239; box-shadow: 0 0 0 1px rgba(254,205,211,0.60); }
.sky-pill--violet  { background: rgba(237,233,254,0.80); color: #5B21B6; box-shadow: 0 0 0 1px rgba(221,214,254,0.60); }
html.dark .sky-pill        { background: rgba(255,255,255,0.06); color: #E2E8F0; box-shadow: 0 0 0 1px rgba(255,255,255,0.10); }
html.dark .sky-pill--sky   { background: rgba(56,189,248,0.15);  color: #BAE6FD; box-shadow: 0 0 0 1px rgba(56,189,248,0.30); }
html.dark .sky-pill--ok    { background: rgba(52,211,153,0.15);  color: #A7F3D0; box-shadow: 0 0 0 1px rgba(52,211,153,0.30); }
html.dark .sky-pill--warn  { background: rgba(251,191,36,0.15);  color: #FDE68A; box-shadow: 0 0 0 1px rgba(251,191,36,0.30); }
html.dark .sky-pill--danger{ background: rgba(251,113,133,0.15); color: #FECDD3; box-shadow: 0 0 0 1px rgba(251,113,133,0.30); }
html.dark .sky-pill--violet{ background: rgba(167,139,250,0.15); color: #DDD6FE; box-shadow: 0 0 0 1px rgba(167,139,250,0.30); }

/* Solid marker badge — "Most picked". Loud on purpose, use once per screen. */
.sky-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--sky-r-full);
  background: var(--sky-accent); color: #FFFFFF;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
}

/* Count badge on a nav item. */
.sky-count {
  display: inline-block; min-width: 18px; height: 18px; padding-inline: 6px;
  border-radius: var(--sky-r-full); background: var(--sky-accent); color: #FFFFFF;
  font-size: 10px; font-weight: 700; line-height: 18px; text-align: center;
}

/* Selectable pill (EditBuilder length picker). Selected = ink, like primary. */
.sky-toggle {
  height: 40px; padding-inline: 16px; border: 0; border-radius: var(--sky-r-full);
  background: var(--sky-surface-sunken); color: #334155;
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background-color var(--d-micro) var(--ease-settle);
}
.sky-toggle:hover { background: var(--sky-surface-hover); }
.sky-toggle[aria-pressed="true"], .sky-toggle.is-on { background: #0F172A; color: #FFFFFF; }
html.dark .sky-toggle { background: rgba(255,255,255,0.06); color: #E2E8F0; }
html.dark .sky-toggle[aria-pressed="true"], html.dark .sky-toggle.is-on { background: #FFFFFF; color: #0F172A; }


/* ===========================================================================
   §8 — INPUTS
   =========================================================================== */

.sky-input {
  height: 40px; width: 100%; padding-inline: 12px;
  border-radius: var(--sky-r-md);
  border: 1px solid var(--sky-ring-solid);
  background: var(--sky-surface);
  font-family: inherit; font-size: 13px; color: var(--sky-text);
  transition: border-color var(--d-micro) var(--ease-settle),
              box-shadow var(--d-micro) var(--ease-settle);
}
.sky-input::placeholder { color: var(--sky-text-faint); }
.sky-input:focus {
  outline: none;
  border-color: var(--sky-accent);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}
html.dark .sky-input { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.10); }

.sky-textarea { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.6; resize: vertical; }

/* Search field in the shell — glassy, borderless-ish, with a leading icon. */
.sky-search {
  display: flex; align-items: center; gap: 8px;
  height: 40px; padding-inline: 12px; width: 100%;
  border-radius: var(--sky-r-md);
  background: rgba(255, 255, 255, 0.60);
  border: 1px solid rgba(255, 255, 255, 0.60);
}
.sky-search input { flex: 1; border: 0; background: transparent; outline: none; font: inherit; font-size: 13px; color: var(--sky-text); }
html.dark .sky-search { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); }

.sky-kbd {
  display: inline-flex; align-items: center; height: 20px; padding-inline: 6px;
  border-radius: 6px; background: var(--sky-surface-sunken);
  font-family: var(--sky-font-mono); font-size: 10px; color: var(--sky-text-muted);
}

/* Field group — a question and its controls. 28px between questions. */
.sky-field + .sky-field { margin-top: var(--sky-gap-field); }
.sky-field > .sky-field-label { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }


/* ===========================================================================
   §9 — EMPTY, ERROR, LOADING
   Page.jsx is emphatic: an outage and "you have nothing yet" MUST NOT render
   identically, or users conclude they have no data rather than that the site
   is down. Two tones, one component.
   =========================================================================== */

.sky-empty {
  border-radius: var(--sky-r-lg);
  padding: 40px 24px;
  text-align: center;
  background: var(--sky-surface);
  box-shadow: 0 0 0 1px var(--sky-ring);
}
.sky-empty__icon {
  width: 40px; height: 40px; margin: 0 auto;
  border-radius: var(--sky-r-md);
  display: grid; place-items: center;
  background: var(--sky-surface-sunken); color: var(--sky-text-muted);
}
.sky-empty__title { margin-top: 12px; font-size: 15px; font-weight: 700; color: var(--sky-text); }
.sky-empty__body  { margin: 4px auto 0; font-size: 13px; color: var(--sky-text-secondary); max-width: 46ch; }
.sky-empty__actions { margin-top: 16px; display: flex; justify-content: center; gap: 8px; }

/* Error tone — rose ground + rose ring. Visibly a different object. */
.sky-empty--error { background: var(--sky-danger-bg); box-shadow: 0 0 0 1px var(--sky-danger-ring); }
.sky-empty--error .sky-empty__icon { background: #FFE4E6; color: var(--sky-danger-text); }
html.dark .sky-empty--error .sky-empty__icon { background: rgba(251,113,133,0.15); }
/* Default copy when the fetch failed: "That didn't load." /
   "Something went wrong on our side, not yours." + a "Try again" button. */

/* Skeleton. One treatment, three shapes: rows (36px), cards (188px), page. */
.sky-skeleton {
  background: rgba(226, 232, 240, 0.70);
  border-radius: 6px;
  animation: sky-pulse 2s cubic-bezier(.4,0,.6,1) infinite;
}
html.dark .sky-skeleton { background: rgba(255, 255, 255, 0.06); }
.sky-skeleton--row  { height: 36px; }
.sky-skeleton--card { height: 188px; border-radius: var(--sky-r-lg); }
.sky-skeleton--title{ height: 32px; width: 224px; }
@keyframes sky-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Inline notice banner (the verify-email nudge). Amber, 16px radius. */
.sky-notice {
  border-radius: var(--sky-r-lg);
  padding: 12px 16px;
  background: rgba(255, 251, 235, 0.80);
  border: 1px solid rgba(252, 211, 77, 0.60);
}
html.dark .sky-notice { background: rgba(251,191,36,0.07); border-color: rgba(251,191,36,0.25); }


/* ===========================================================================
   §10 — SHELL: TOPBAR, SIDEBAR, BACKDROP
   =========================================================================== */

.sky-topbar {
  position: sticky; top: 0; z-index: 40;
  height: var(--sky-h-topbar);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
html.dark .sky-topbar { background: rgba(2, 6, 23, 0.55); }
/* The topbar's bottom edge is a sky gradient hairline, NOT a flat border. */
.sky-topbar::after {
  content: ''; display: block; height: 1px;
  background: linear-gradient(90deg, transparent 0%,
    rgba(56,189,248,0.35) 25%, rgba(56,189,248,0.55) 50%,
    rgba(56,189,248,0.35) 75%, transparent 100%);
}

.sky-nav-item {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  height: 40px; padding-inline: 12px;
  border-radius: var(--sky-r-md);
  font-size: 13.5px; font-weight: 500;
  color: #334155; text-decoration: none;
  transition: background-color 200ms var(--ease-settle),
              color 200ms var(--ease-settle),
              transform 200ms var(--ease-settle);
}
.sky-nav-item:hover { color: var(--sky-text); background: rgba(255,255,255,0.60); transform: translateX(1px); }
html.dark .sky-nav-item { color: #CBD5E1; }
html.dark .sky-nav-item:hover { color: #FFF; background: rgba(255,255,255,0.05); }

/* Active nav — sky gradient wash + sky ring + soft accent shadow + a 3px
   left accent bar. All four together; any one alone reads as a hover. */
.sky-nav-item.is-active {
  background: linear-gradient(90deg, rgba(14,165,233,0.18), rgba(14,165,233,0.06));
  color: var(--sky-accent-deep);
  box-shadow: 0 0 0 1px rgba(125,211,252,0.40), var(--sky-shadow-accent);
}
.sky-nav-item.is-active::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: var(--sky-r-full);
  background: linear-gradient(180deg, #7DD3FC, #0EA5E9);
}
html.dark .sky-nav-item.is-active { color: #7DD3FC; }

/* Dropdown / menu surface — this one DOES get a shadow and a real border. */
.sky-menu {
  border-radius: var(--sky-r-lg); padding: 8px;
  background: #FFFFFF; border: 1px solid rgba(226,232,240,0.80);
  box-shadow: var(--sky-shadow-menu);
}
html.dark .sky-menu { background: #0F172A; border-color: rgba(51,65,85,0.60); }
.sky-menu a, .sky-menu button {
  display: flex; align-items: center; gap: 8px;
  height: 36px; padding-inline: 12px; width: 100%;
  border: 0; background: transparent; border-radius: var(--sky-r-sm);
  font: inherit; font-size: 13px; color: #334155; text-decoration: none; cursor: pointer;
}
.sky-menu a:hover, .sky-menu button:hover { background: #F8FAFC; }
html.dark .sky-menu a, html.dark .sky-menu button { color: #E2E8F0; }
html.dark .sky-menu a:hover, html.dark .sky-menu button:hover { background: rgba(255,255,255,0.04); }

/* Page backdrop — a fixed layer BEHIND everything: dot grid + two radial
   washes. This is what makes the dark-mode 3% card surface read as glass. */
.sky-backdrop { position: fixed; inset: 0; z-index: -10; pointer-events: none; }
.sky-backdrop__grid {
  position: absolute; inset: 0; opacity: 0.30;
  background-image:
    linear-gradient(to right,  rgba(2,132,199,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(2,132,199,.06) 1px, transparent 1px);
  background-size: 56px 56px;
}
.sky-backdrop__wash {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 30% 20%, rgba(186,230,253,.45), transparent 60%),
    radial-gradient(40% 40% at 80% 80%, rgba(196,181,253,.22), transparent 60%);
}
html.dark .sky-backdrop__grid { opacity: 0.18;
  background-image:
    linear-gradient(to right,  rgba(125,211,252,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(125,211,252,.06) 1px, transparent 1px);
}
html.dark .sky-backdrop__wash {
  background:
    radial-gradient(70% 60% at 25% 15%, rgba(56,189,248,.22), transparent 65%),
    radial-gradient(55% 50% at 85% 85%, rgba(168,85,247,.18), transparent 65%),
    radial-gradient(40% 40% at 70% 35%, rgba(236,72,153,.10), transparent 65%),
    linear-gradient(180deg, #060A1A 0%, #080D20 100%);
}


/* ===========================================================================
   §11 — MEDIA TILE ("the click")
   Every thumbnail on Hub uses the same four-layer hover. Keep it identical
   everywhere; it is the one gesture that is actually about thumbnails.
   =========================================================================== */

.sky-tile {
  position: relative; display: block; width: 100%;
  aspect-ratio: 16 / 9; overflow: hidden;
  border: 0; padding: 0; cursor: pointer;
  border-radius: var(--sky-r-md);
  background: #E2E8F0;
  box-shadow: 0 0 0 1px rgba(226,232,240,0.70);
  transition: box-shadow var(--d-comp) var(--ease-settle);
}
.sky-tile:hover, .sky-tile:focus-visible { box-shadow: 0 0 0 1px var(--sky-accent-soft); }
.sky-tile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--d-comp) var(--ease-settle), opacity 500ms var(--ease-load);
}
.sky-tile:hover img, .sky-tile:focus-visible img { transform: scale(1.04); }
.sky-tile__cap {
  position: absolute; inset-inline: 0; bottom: 0; padding: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: linear-gradient(to top, rgba(2,6,23,0.85), transparent);
  color: #FFF; font-size: 12.5px; font-weight: 700;
  opacity: 0; transition: opacity var(--d-micro) linear;
}
.sky-tile:hover .sky-tile__cap, .sky-tile:focus-visible .sky-tile__cap { opacity: 1; }


/* ===========================================================================
   §12 — LEGACY MARKETING GRAMMAR (grammar B — see §0)
   Only for pages that already look like this. Do not introduce it.
   brand-400 #22BDFF is a DIFFERENT blue from the accent in §1.5.
   =========================================================================== */

.sky-surface {
  background: #FFFFFF;
  border: 1px solid #EEF1F6;
  border-radius: var(--sky-r-lg);
  box-shadow: 0 1px 2px rgba(15,23,42,0.03), 0 4px 16px -10px rgba(15,23,42,0.06);
  transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
}
html.dark .sky-surface {
  background: #111A2E; border-color: rgba(255,255,255,0.06);
  box-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 8px 24px -16px rgba(0,0,0,0.40);
}
.sky-surface--sky {
  background: linear-gradient(160deg, #EFF9FF 0%, #FFFFFF 100%);
  border-color: #B6E5FF;
  box-shadow: 0 14px 30px -16px rgba(34,189,255,0.18), inset 0 1px 0 rgba(255,255,255,0.7);
}
.sky-hover-lift { transition: all 300ms ease-out; }
.sky-hover-lift:hover {
  transform: translateY(-3px) scale(1.005);
  box-shadow: 0 4px 14px -4px rgba(15,23,42,0.08),
              0 20px 48px -16px rgba(34,189,255,0.18),
              0 0 0 1px rgba(34,189,255,0.10);
}
.sky-text-gradient {
  background: linear-gradient(135deg, #0AA1E7 0%, #22BDFF 50%, #A78BFA 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html.dark .sky-text-gradient {
  background: linear-gradient(135deg, #75D2FF 0%, #22BDFF 50%, #C4B5FD 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* brand scale, for reference:
   50 #EFF9FF · 100 #DEF1FF · 200 #B6E5FF · 300 #75D2FF · 400 #22BDFF
   500 #0AA1E7 · 600 #0084C2 · 700 #0069A1 · 800 #005580 · 900 #003F60
   ink: 950 #070D1B · 900 #0B1220 · 800 #111A2E · 700 #172241 · 600 #1F2D52 */


/* ===========================================================================
   §13 — MOTION PRIMITIVES
   =========================================================================== */

.sky-lift { transition: transform var(--d-comp) var(--ease-settle),
                        box-shadow var(--d-comp) var(--ease-settle); }
.sky-lift:hover { transform: translate3d(0, -3px, 0); }

.sky-reveal { opacity: 0; transform: translate3d(0, 22px, 0);
  transition: opacity 224ms linear var(--sky-rv-delay, 0ms),
              transform var(--d-sect) var(--ease-settle) var(--sky-rv-delay, 0ms); }
.sky-reveal.is-shown { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .sky-reveal { opacity: 1 !important; transform: none !important; }
  .sky-skeleton { animation: none !important; }
}


/* ===========================================================================
   §14 — REFERENCE MARKUP  (copy/paste shapes)
   ---------------------------------------------------------------------------
   PAGE
     <div class="sky-page">
       <header class="sky-page-header">
         <div>
           <div class="sky-eyebrow">Projects</div>
           <h1 class="sky-h1">Your work</h1>
           <p class="sky-sub">Everything you've ordered, newest first.</p>
         </div>
         <div class="sky-actions">
           <button class="sky-btn sky-btn--ghost">Filter</button>
           <button class="sky-btn sky-btn--primary">New project</button>
         </div>
       </header>
       <section>
         <div class="sky-section-head"><h2 class="sky-h2">In progress</h2></div>
         <div class="sky-grid-cards"> … </div>
       </section>
     </div>

   CARD
     <article class="sky-card sky-card--interactive">
       <span class="sky-status sky-status--active">In progress</span>
       <h3 class="sky-h3" style="margin-top:8px">Gaming thumbnail — ep. 14</h3>
       <p class="sky-hint">Claimed by Nova · first draft in 24h</p>
     </article>

   EMPTY / ERROR
     <div class="sky-empty">
       <div class="sky-empty__icon"><svg …></svg></div>
       <div class="sky-empty__title">Nothing here yet.</div>
       <p class="sky-empty__body">Your first order will show up here.</p>
       <div class="sky-empty__actions">
         <a class="sky-btn sky-btn--primary" href="/shop.html">Start an order</a>
       </div>
     </div>
     <div class="sky-empty sky-empty--error"> … "That didn't load." … </div>
   =========================================================================== */