/* RoachWares system: foundation tokens.
   Theme-independent scales (type, space, shape, motion, layers, focus) and the brand typography.
   Colour comes from rw-themes.css, which every page loads with this file. Everything is prefixed
   --rw- so a site's own tokens never collide; map yours onto these, or use them directly. */

:root {
  /* ---- Type: Anybody for display, Schibsted Grotesk for reading, JetBrains Mono for the machine */
  --rw-font-display: "Anybody", "Arial Black", "Helvetica Neue", system-ui, sans-serif;
  --rw-font-text: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --rw-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* display voice: brands override these (see the brand blocks below) */
  --rw-display-wght: 820;
  --rw-display-wdth: 112%;
  --rw-display-style: normal;
  --rw-display-tracking: -0.02em;
  /* the wordmark's setting, matching the brand kits' outlined masters (use those files where you can) */
  --rw-wordmark-wght: 850;
  --rw-wordmark-wdth: 112%;
  --rw-wordmark-style: normal;
  --rw-wordmark-tracking: -0.015em;

  --rw-t-mega: clamp(3.4rem, 0.6rem + 10vw, 12rem);
  --rw-t-display: clamp(2.3rem, 1.2rem + 4vw, 5rem);
  --rw-t-statement: clamp(1.75rem, 0.9rem + 3.2vw, 4rem);
  --rw-t-h1: clamp(2rem, 1.4rem + 2vw, 3rem);
  --rw-t-h2: clamp(1.55rem, 1.25rem + 1vw, 2.1rem);
  --rw-t-h3: 1.16rem;
  --rw-t-lead: clamp(1.12rem, 1rem + 0.4vw, 1.3rem);
  --rw-t-body: 1.0625rem;
  --rw-t-small: 0.9rem;
  --rw-t-micro: 0.72rem;
  --rw-leading-tight: 1.02;
  --rw-leading-snug: 1.18;
  --rw-leading-body: 1.62;
  --rw-tracking-caps: 0.12em;
  --rw-measure: 68ch;

  /* ---- Space: a 4 px base */
  --rw-sp-1: 4px;
  --rw-sp-2: 8px;
  --rw-sp-3: 12px;
  --rw-sp-4: 16px;
  --rw-sp-5: 24px;
  --rw-sp-6: 32px;
  --rw-sp-7: 48px;
  --rw-sp-8: 64px;
  --rw-sp-9: 96px;
  --rw-sp-10: 128px;
  --rw-gutter: clamp(16px, 4.5vw, 56px);
  --rw-max: 1360px;
  --rw-tap: 44px;

  --rw-r-pill: 999px;
  --rw-hairline: 1px;

  /* ---- Motion: easing curves; durations (below) scale with the theme's tempo */
  --rw-ease-assemble: cubic-bezier(0.16, 1, 0.3, 1);
  --rw-ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --rw-ease-gentle: cubic-bezier(0.4, 0, 0.2, 1);
  --rw-stagger: 60ms;

  /* ---- Layers */
  --rw-z-field: -1;
  --rw-z-base: 0;
  --rw-z-raised: 10;
  --rw-z-sticky: 40;
  --rw-z-nav: 60;
  --rw-z-popover: 80;
  --rw-z-dialog: 90;
  --rw-z-toast: 100;

  /* ---- Focus: a 3 px ring in the theme's focus colour (signal green on dark, deep green on light) */
  --rw-focus-offset: 3px;

  /* ---- The kernel ramp (D1), the same values as tokens/palette.json. Themes map it onto roles
     (--rw-action, --rw-accent and the rest); use the steps directly only for brand artwork. */
  --rw-kernel-50: #fbf4ff;
  --rw-kernel-100: #f4e4fe;
  --rw-kernel-200: #e4c7f9;
  --rw-kernel-300: #d1a4ef;
  --rw-kernel-400: #b97ede;
  --rw-kernel-500: #9554bb;
  --rw-kernel-600: #703093;
  --rw-kernel-700: #5c257a;
  --rw-kernel-800: #421a58;
  --rw-kernel-900: #260f34;
  --rw-kernel-950: #15081c;
}

/* Composite tokens that read theme colours. Declared on every [data-theme] element as well as the
   root, so a nested theme (a sample, a specimen) resolves them with its own colours. */
:root,
[data-theme] {
  /* radii scale with the theme's --rw-radius-scale; durations with its --rw-tempo */
  --rw-r-xs: calc(4px * var(--rw-radius-scale, 1));
  --rw-r-sm: calc(6px * var(--rw-radius-scale, 1));
  --rw-r-md: calc(10px * var(--rw-radius-scale, 1));
  --rw-r-lg: calc(16px * var(--rw-radius-scale, 1));
  --rw-r-xl: calc(24px * var(--rw-radius-scale, 1));
  --rw-dur-1: calc(120ms * var(--rw-tempo, 1));
  --rw-dur-2: calc(220ms * var(--rw-tempo, 1));
  --rw-dur-3: calc(420ms * var(--rw-tempo, 1));
  --rw-dur-4: calc(760ms * var(--rw-tempo, 1));
  --rw-dur-scene: calc(1200ms * var(--rw-tempo, 1));
  --rw-elev-0: inset 0 1px 0 var(--rw-highlight);
  --rw-elev-1: inset 0 1px 0 var(--rw-highlight), 0 1px 2px var(--rw-shadow), 0 8px 20px -10px var(--rw-shadow-tint);
  --rw-elev-2: inset 0 1px 0 var(--rw-highlight), 0 2px 6px var(--rw-shadow), 0 18px 40px -14px var(--rw-shadow-tint), 0 6px 14px -6px var(--rw-shadow);
  --rw-elev-3: inset 0 1px 0 var(--rw-highlight), 0 6px 14px var(--rw-shadow), 0 34px 80px -22px var(--rw-shadow-tint), 0 12px 28px -10px var(--rw-shadow);
  --rw-ring: 0 0 0 var(--rw-focus-width, 3px) var(--rw-focus);
  --rw-gradient-brand: linear-gradient(135deg, var(--rw-kernel-500) 0%, var(--rw-kernel-600) 48%, var(--rw-kernel-800) 100%);
  /* the wordmark's two colours: RoachNet's text and its LED-o in signal green. Brands with their
     own (RoachWares: cream and acid, or ink and paper green) set them in rw-themes.css */
  --rw-wordmark-ink: var(--rw-text);
  --rw-wordmark-accent: var(--rw-signal-text);
}

/* Reduced motion: every duration resolves at once, so transitions land on their final state */
@media (prefers-reduced-motion: reduce) {
  :root,
  [data-theme] {
    --rw-dur-1: 0ms;
    --rw-dur-2: 0ms;
    --rw-dur-3: 0ms;
    --rw-dur-4: 0ms;
    --rw-dur-scene: 0ms;
    --rw-stagger: 0ms;
  }
}

/* ---- Brands: typography voice per brand. Colour overrides per brand live in rw-themes.css */
/* RoachNet: Anybody 850 at 112% width, -0.015em, with the LED-o */
[data-brand="roachnet"] {
  --rw-wordmark-wght: 850;
  --rw-wordmark-wdth: 112%;
  --rw-wordmark-style: normal;
  --rw-wordmark-tracking: -0.015em;
}
/* RoachWares (RW07): display in Anybody Italic 880 at 128%, -0.035em; the wordmark in Anybody
   Italic 900 at 124%, -0.03em, "Roach" in cream and "Wares" in acid (ink and paper green on light) */
[data-brand="roachwares"] {
  --rw-display-wght: 880;
  --rw-display-wdth: 128%;
  --rw-display-style: italic;
  --rw-display-tracking: -0.035em;
  --rw-wordmark-wght: 900;
  --rw-wordmark-wdth: 124%;
  --rw-wordmark-style: italic;
  --rw-wordmark-tracking: -0.03em;
}
[data-brand="stream"] {
  --rw-display-wght: 800;
  --rw-display-wdth: 118%;
  --rw-display-tracking: -0.01em;
}
[data-brand="forge"] {
  --rw-display-wght: 860;
  --rw-display-wdth: 104%;
  --rw-display-tracking: -0.025em;
}