/* =====================================================================
   MOONWORKS HQ · design tokens
   Source of truth: computed styles of https://www.moonworks.agency
   (headless Chrome probe, 19 Oct 2026) + the HQ product layer.
   Dark is the default. Light = html[data-theme="light"].
   No hard-coded colours in components: always var(--*).
   ===================================================================== */

/* ---------- Fonts (exact URLs from the live site <head>) ---------- */
@font-face{font-family:'Stack Sans Headline';src:url('https://cdn.prod.website-files.com/69e3593c9eb46101019a3728/6ad0f8c13a6bb26ae8ecdde2_stacksans-headline-latin.woff2') format('woff2');font-weight:200 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Stack Sans Headline';src:url('https://cdn.prod.website-files.com/69e3593c9eb46101019a3728/6ad0f9c207c1f4f2dbd8736b_stacksans-headline-arrows.woff2') format('woff2');font-weight:200 700;font-style:normal;font-display:swap;unicode-range:U+2190,U+2192}
@font-face{font-family:'Stack Sans Text';src:url('https://cdn.prod.website-files.com/69e3593c9eb46101019a3728/6ad0f8d751d054f40f13fc5a_stacksans-text-latin.woff2') format('woff2');font-weight:200 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Stack Sans Text';src:url('https://cdn.prod.website-files.com/69e3593c9eb46101019a3728/6ad0f9c26e417348388f3ea5_stacksans-text-arrows.woff2') format('woff2');font-weight:200 700;font-style:normal;font-display:swap;unicode-range:U+2190,U+2192}
@font-face{font-family:'Stack Sans Notch';src:url('https://cdn.prod.website-files.com/69e3593c9eb46101019a3728/6ad0f8d7fb26e2450ea619d2_stacksans-notch-latin.woff2') format('woff2');font-weight:200 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Stack Sans Notch';src:url('https://cdn.prod.website-files.com/69e3593c9eb46101019a3728/6ad0f9c3efac4e3a4fae7d76_stacksans-notch-arrows.woff2') format('woff2');font-weight:200 700;font-style:normal;font-display:swap;unicode-range:U+2190,U+2192}

:root{
  color-scheme: dark;

  /* ---------- Brand palette (site values) ---------- */
  --mw-navy-950: #070912;      /* deepest space, 3D scene clear colour */
  --mw-navy-900: #0a0c17;      /* site body background */
  --mw-navy-850: #0e1120;
  --mw-navy-800: #13151f;      /* raised navy */
  --mw-navy-700: #1a1d2c;
  --mw-navy-600: #232738;
  --mw-blue: #31a8ff;          /* --accent on the site, primary button */
  --mw-blue-deep: #2d62ff;     /* brand blue, focus ring */
  --mw-blue-ink: #0a66c2;      /* accent text on light */
  --mw-violet: #5c22e3;        /* --accent-secondary */
  --mw-pink: #df7afe;          /* --accent-tertiary */
  --mw-peach: #e9b3a0;         /* hero glow centre */
  --mw-ember: #ea5f28;         /* hero glow warm edge */
  --mw-crimson: #d63048;       /* hero glow red */
  --mw-sand: #efc493;          /* footer glow */
  --mw-white: #ffffff;
  --mw-ink-0: #fbfafc;         /* --text-primary */
  --mw-ink-1: #cccccc;         /* --text-secondary */
  --mw-ink-2: #8f93a3;
  --mw-ink-3: #757575;         /* --text-muted */

  /* ---------- Semantic surfaces (dark default) ---------- */
  --bg: var(--mw-navy-900);
  --bg-deep: var(--mw-navy-950);
  --surface-1: rgba(19, 21, 31, 0.72);          /* cards over the grid */
  --surface-2: rgba(26, 29, 44, 0.82);          /* popovers, menus */
  --surface-3: rgba(35, 39, 56, 0.92);          /* hover rows, inputs */
  --surface-glass: rgba(0, 0, 0, 0.45);         /* site nav pill: #00000073 */
  --surface-btn-ghost: rgba(10, 12, 23, 0.4);   /* site .btn_secondary */
  --line-1: rgba(255, 255, 255, 0.08);          /* dividers */
  --line-2: rgba(255, 255, 255, 0.16);          /* card borders */
  --line-3: rgba(255, 255, 255, 0.2);           /* site --neutral-lighter #fff3, button border */
  --line-strong: rgba(255, 255, 255, 0.6);      /* site nav pill border #fff9 */
  --text-1: var(--mw-ink-0);
  --text-2: var(--mw-ink-1);
  --text-3: var(--mw-ink-2);
  --text-4: var(--mw-ink-3);
  --text-on-accent: #ffffff;
  --accent: var(--mw-blue);
  --accent-hover-filter: brightness(1.08);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--mw-blue-deep);

  /* ---------- Status (Gemeos beams, Moonworks colours) ---------- */
  --status-late: #ff4d5e;        /* red: late or blocked */
  --status-late-bg: rgba(255, 77, 94, 0.14);
  --status-waiting: #ffb547;     /* amber: waiting for client validation */
  --status-waiting-bg: rgba(255, 181, 71, 0.14);
  --status-active: var(--mw-blue); /* blue: in progress */
  --status-active-bg: rgba(49, 168, 255, 0.14);
  --status-launched: #4ee39a;    /* green: launched */
  --status-launched-bg: rgba(78, 227, 154, 0.14);
  --status-planned: #a9b0c7;     /* blueprint / upcoming */
  --status-planned-bg: rgba(169, 176, 199, 0.12);
  --status-retainer: var(--mw-pink); /* satellites */
  --status-retainer-bg: rgba(223, 122, 254, 0.14);

  /* ---------- Discipline tags (Kanban) ---------- */
  --tag-brand: #df7afe;
  --tag-copy: #efc493;
  --tag-design: #31a8ff;
  --tag-build: #7c8cff;
  --tag-seo: #4ee39a;
  --tag-qa: #ffb547;

  /* ---------- Backgrounds: grid, glow, grain (site recipes) ---------- */
  --grid-cell: 50px;                                    /* half the site grid (owner, 19 Oct) */
  --grid-line: rgba(255, 255, 255, 0.5);                /* .page_bg_grid lines */
  --grid-opacity: 0.7;                                  /* .page_bg_grid opacity -> ~0.35 effective */
  --grid-image:
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    linear-gradient(var(--grid-line) 1px, transparent 1px);
  --glow-image:
    radial-gradient(34% 30% at 10% 18%, rgba(45, 98, 255, .62), rgba(45, 98, 255, 0) 74%),
    radial-gradient(30% 22% at 32% 10%, rgba(49, 168, 255, .45), rgba(49, 168, 255, 0) 74%),
    radial-gradient(34% 26% at 50% 40%, rgba(240, 166, 162, .55), rgba(240, 166, 162, 0) 74%),
    radial-gradient(30% 24% at 68% 24%, rgba(223, 122, 254, .28), rgba(223, 122, 254, 0) 74%),
    radial-gradient(30% 26% at 12% 62%, rgba(234, 95, 40, .45), rgba(234, 95, 40, 0) 74%),
    radial-gradient(24% 20% at 26% 78%, rgba(214, 48, 72, .32), rgba(214, 48, 72, 0) 74%);
  --glow-blur: 16px;                                    /* site uses blur(15.84px) saturate(1.12) */
  --glow-opacity-app: 0.35;                             /* in the app the glow is a backdrop, not a hero */
  --grain-opacity: 0.07;                                /* site value; never use a blend mode */
  --grain-size: 220px;
  --grain-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ---------- 3D scene colours (Three.js reads these via getComputedStyle) ---------- */
  --scene-clear: #070912;
  --scene-fog: #0a0c17;
  --scene-hull: #d9dde8;        /* light module hull */
  --scene-hull-shade: #8d93a8;
  --scene-hull-dark: #2a2f44;   /* trusses, arms */
  --scene-panel: #13233f;       /* solar panel glass */
  --scene-window: #9fd6ff;      /* lit windows */
  --scene-blueprint: #31a8ff;   /* wireframe ghosts */
  --scene-orbit: rgba(255, 255, 255, 0.22);
  --scene-key-light: #ffe2cc;   /* warm key from bottom-left (hero glow) */
  --scene-rim-light: #31a8ff;   /* cool rim from top-right */

  /* ---------- Typography ---------- */
  --font-headline: 'Stack Sans Headline', Arial, sans-serif;  /* titles, always weight 400 */
  --font-text: 'Stack Sans Text', Arial, sans-serif;          /* UI and body */
  --font-notch: 'Stack Sans Notch', Arial, sans-serif;        /* labels, tags, numbers, eyebrow */

  --fs-display: 4rem;      /* 64px  site h1, lh 1.3, ls -2px */
  --fs-h1: 2.875rem;       /* 46px  site h2, lh 1.2, ls -1px */
  --fs-h2: 2rem;           /* 32px  page titles in app */
  --fs-h3: 1.5rem;         /* 24px  site h3, lh 1.18, ls -0.48px */
  --fs-h4: 1.125rem;       /* 18px  card titles */
  --fs-body: 0.9375rem;    /* 15px  UI body (site body 16) */
  --fs-body-lg: 1rem;      /* 16px */
  --fs-small: 0.8125rem;   /* 13px  table cells, meta */
  --fs-micro: 0.75rem;     /* 12px  site eyebrow, tags */
  --fs-nano: 0.6875rem;    /* 11px  uppercase labels */

  --lh-tight: 1.15;
  --lh-title: 1.2;
  --lh-body: 1.4;          /* site 22.4 / 16 */
  --ls-display: -0.031em;  /* -2px at 64 */
  --ls-title: -0.02em;
  --ls-body: -0.02em;      /* site -0.32px at 16 */
  --ls-label: 0.08em;      /* uppercase Notch labels */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* ---------- Spacing (site scale + 4px steps for UI) ---------- */
  --space-0: 0;
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-ms: 12px;
  --space-md: 16px;
  --space-ml: 20px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 120px;

  /* ---------- Layout ---------- */
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 64px;
  --content-max: 1360px;
  --gutter: 24px;
  --gutter-mobile: 16px;
  --tabbar-h: 64px;        /* mobile bottom tab bar */

  /* ---------- Radius ---------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 15px;       /* site --radius-card .9375rem */
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 100px;    /* site buttons 6.25rem */

  /* ---------- Shadows ---------- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .6);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, .3), 0 24px 48px -16px rgba(0, 0, 0, .7);
  --shadow-pop: 0 0 0 1px var(--line-2), 0 30px 80px -20px rgba(0, 0, 0, .8);
  --shadow-glow-blue: 0 0 24px rgba(49, 168, 255, .45);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, .06);

  /* ---------- Blur ---------- */
  --blur-glass: 10px;      /* site nav pill */
  --blur-heavy: 24px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-instant: 80ms;
  --dur-fast: 160ms;
  --dur-base: 200ms;       /* site button transition .2s */
  --dur-slow: 360ms;
  --dur-camera: 900ms;     /* 3D camera fly-to */
  --dur-beam-pulse: 2400ms;
  --dur-orbit: 60s;        /* one satellite revolution */
  --dur-ticker: 6000ms;    /* activity ticker item */

  /* ---------- Z layers ---------- */
  --z-canvas: 0;
  --z-chrome: 10;
  --z-sidebar: 20;
  --z-popover: 40;
  --z-modal: 60;
  --z-toast: 80;
  --z-grain: 2000;         /* site value, pointer-events none */
}

/* ---------- Light theme (site [data-theme="light"] values) ---------- */
html[data-theme="light"]{
  color-scheme: light;
  --bg: #f6f7fb;
  --bg-deep: #eceef5;
  --surface-1: rgba(255, 255, 255, 0.82);
  --surface-2: #ffffff;
  --surface-3: #eceef5;
  --surface-glass: rgba(255, 255, 255, 0.6);
  --surface-btn-ghost: rgba(255, 255, 255, 0.55);
  --line-1: rgba(10, 12, 23, 0.08);
  --line-2: rgba(10, 12, 23, 0.12);
  --line-3: rgba(10, 12, 23, 0.22);
  --line-strong: rgba(10, 12, 23, 0.4);
  --text-1: #0a0c17;
  --text-2: #363b4e;
  --text-3: #555b70;
  --text-4: #7a8094;
  --grid-line: rgba(10, 12, 23, 0.13);
  --grid-opacity: 1;
  --glow-opacity-app: 0.5;
  --shadow-1: 0 1px 2px rgba(10, 12, 23, .04), 0 12px 32px -16px rgba(10, 12, 23, .18);
  --shadow-2: 0 2px 4px rgba(10, 12, 23, .06), 0 24px 48px -16px rgba(10, 12, 23, .25);
  --shadow-pop: 0 0 0 1px var(--line-2), 0 30px 80px -20px rgba(10, 12, 23, .3);
  --status-waiting: #c27a00;
  --status-launched: #12a160;
  --status-late: #d92d42;
  --scene-clear: #e9ecf5;    /* light mode keeps the station in "daylight orbit" */
  --scene-fog: #f6f7fb;
  --scene-orbit: rgba(10, 12, 23, 0.18);
}

/* ---------- Ready-made background utilities ---------- */
.mw-bg{ background-color: var(--bg); color: var(--text-1); font-family: var(--font-text); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); }
.mw-grid{ position:absolute; inset:0; pointer-events:none; background-image: var(--grid-image); background-size: var(--grid-cell) var(--grid-cell); opacity: var(--grid-opacity); }
.mw-glow{ position:absolute; inset:-10%; pointer-events:none; background: var(--glow-image); filter: blur(var(--glow-blur)) saturate(1.12); opacity: var(--glow-opacity-app); }
.mw-grain::after{ content:""; position:fixed; inset:0; z-index: var(--z-grain); pointer-events:none; opacity: var(--grain-opacity); background-size: var(--grain-size) var(--grain-size); background-image: var(--grain-image); }

/* ---------- Buttons (site recipes) ---------- */
.mw-btn{ display:inline-flex; align-items:center; justify-content:center; gap: var(--space-sm); height: 40px; padding: 0 var(--space-ml); border-radius: var(--radius-pill); font: var(--fw-medium) 0.875rem/1 var(--font-text); letter-spacing: var(--ls-body); text-decoration:none; cursor:pointer; border:1px solid transparent; transition: filter var(--dur-base), background-color var(--dur-base), border-color var(--dur-base); }
.mw-btn--primary{ background: var(--accent); color: var(--text-on-accent); }
.mw-btn--primary:hover{ filter: var(--accent-hover-filter); }
.mw-btn--ghost{ background: var(--surface-btn-ghost); color: var(--text-1); border-color: var(--line-3); }
.mw-btn--ghost:hover{ background: var(--surface-3); }
.mw-btn--white{ background:#fff; color: var(--mw-navy-900); }
.mw-btn--sm{ height: 32px; padding: 0 var(--space-ms); font-size: var(--fs-small); }
.mw-btn:focus-visible{ outline:none; box-shadow: var(--focus-ring); }

@media (prefers-reduced-motion: reduce){
  :root{ --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-camera: 0ms; --dur-beam-pulse: 0ms; }
}