/* XYROX Marketing Reel — design-system tokens, scoped.

   Imported from the Claude Design project's _ds bundle
   (xyrox-design-system-8b2d4349). Three deliberate changes from the source:

   1. `:root` becomes `.reel-stage`. The source declares its tokens globally and
      also ships bare `body{}`, `h1,h2,h3,h4{}` and `a{}` rules — dropped into
      this site verbatim they would restyle every heading and link on the page.
   2. `--font-sans` maps to the site's own Bricolage Grotesque. The DS readme
      says Space Grotesk is a stand-in "because no brand font files were
      provided" — XYROX's brand face is Bricolage, so this is the substitution
      the design system was asking for, and it avoids a fourth webfont.
   3. Both themes are kept. The Hero cut runs light (reel-boot.js sets
      TWEAK_DEFAULTS.theme), and the scene stamps data-theme on its own root,
      so the light block below is the one actually in play. */

.reel-stage{
  /* fonts — the site's trio, standing in for the DS placeholders */
  --font-sans:'Bricolage Grotesque','Archivo',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;

  /* base neutrals — warm-tinted, not cold blue-gray */
  --ink-900:#111111;--ink-800:#221f1c;--ink-700:#3a3532;--ink-600:#5b5551;--ink-500:#7d766f;
  --ink-400:#a39a90;--ink-300:#cbc2b6;--ink-200:#e4dcd0;--ink-100:#f0e9dd;
  --paper-0:#ffffff;--paper-50:#faf7f2;--paper-100:#f4efe6;
  --accent-700:#b8450a;--accent-600:#ea580c;--accent-500:#f2711f;--accent-400:#f79256;
  --accent-100:#fde3cf;--accent-50:#fef1e6;
  --success-600:#16803d;--success-100:#d9f0e3;
  --warning-600:#a3760f;--warning-100:#f6e6c8;
  --danger-600:#c22a2a;--danger-100:#f8dcdc;
  --info-600:#2f5fce;--info-100:#dee7fb;

  /* type scale */
  --text-display:clamp(2.5rem,4vw,4rem);--text-h1:2.25rem;--text-h2:1.75rem;
  --text-h3:1.375rem;--text-h4:1.125rem;
  --text-body-lg:1.0625rem;--text-body:0.9375rem;--text-body-sm:0.8125rem;
  --text-caption:0.75rem;--text-mono:0.8125rem;
  --lh-tight:1.1;--lh-snug:1.25;--lh-normal:1.5;--lh-relaxed:1.65;
  --weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;
  --tracking-tight:-0.02em;--tracking-normal:0;--tracking-wide:0.04em;--tracking-cap:0.08em;

  /* space, radius, shadow, motion */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;
  --space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;
  --radius-sm:8px;--radius-md:10px;--radius-lg:12px;--radius-xl:16px;--radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(17,17,17,0.06),0 1px 1px rgba(17,17,17,0.04);
  --shadow-md:0 4px 12px rgba(17,17,17,0.08),0 2px 4px rgba(17,17,17,0.04);
  --shadow-lg:0 12px 32px rgba(17,17,17,0.12),0 4px 8px rgba(17,17,17,0.05);
  --ease-standard:cubic-bezier(.4,0,.2,1);--duration-fast:120ms;--duration-normal:200ms;
}

/* the reel is authored dark; the scene sets data-theme itself */
.reel-stage,.reel-stage [data-theme="dark"]{
  --surface-page:#161311;--surface-card:#211d19;--surface-sunken:#0d0b0a;--surface-inverse:var(--paper-50);
  --text-primary:#f5f0e8;--text-secondary:#c9c0b5;--text-tertiary:#948a7e;
  --text-on-accent:#ffffff;--text-on-inverse:var(--ink-900);
  --border-subtle:#332d27;--border-default:#453e36;--border-strong:#7d766f;
  --accent:var(--accent-500);--accent-hover:var(--accent-400);--accent-tint:#3a2415;
  --link:var(--accent-500);--link-hover:var(--accent-400);
}
.reel-stage [data-theme="light"]{
  --surface-page:var(--paper-50);--surface-card:var(--paper-0);--surface-sunken:var(--paper-100);
  --text-primary:var(--ink-900);--text-secondary:var(--ink-600);--text-tertiary:var(--ink-500);
  --border-subtle:var(--ink-200);--border-default:var(--ink-300);--border-strong:var(--ink-700);
  --accent:var(--accent-600);--accent-hover:var(--accent-700);--accent-tint:var(--accent-50);
}