theme.css

/* ==========================================================================
   brutalist-web-theme / Tailwind v4 adapter
   --------------------------------------------------------------------------
   Maps the tokens onto Tailwind's theme namespaces so you get utilities like
   bg-bw-ground, border-bw, text-bw-mega, grid-cols-bw.

   There is not one literal value in this file. Every entry points at a custom
   property declared in tokens.css, which stays the single source of truth. If
   you want to change a value, change it there.

   `@theme inline` is required rather than plain `@theme`: it makes the
   generated utility carry the underlying var() reference instead of pointing
   back at the theme variable, which is what keeps the token resolvable when
   it was declared outside the utility's scope.

   VERIFICATION.

   Every namespace below was compiled and read back rather than assumed. An
   entry filed under a namespace Tailwind does not process raises no error and
   produces no utility, so an adapter can look complete in the file and ship
   nothing. The only way to know is to compile it and read the output.

   Harness: compiled through @tailwindcss/postcss against a bare stylesheet
   importing nothing but tailwindcss and this file, with the candidates forced
   by @source inline(...) rather than scanned from a template. The output is
   parsed with postcss and the DECLARATIONS are read. Class names are never
   grepped: a selector existing in the output says nothing about which
   property it sets, and setting the wrong property is the failure this exists
   to catch. Stock p-4 is compiled in every run as a sanity check, so a broken
   compile cannot be misread as a namespace that does not generate.

   Probe names are unique per namespace, not merely probe values. Several
   namespaces share a utility prefix: border- is fed by both --border-width-*
   and --color-*, font- by both --font-* and --font-weight-*, text- by both
   --text-* and --color-*. Give two of them the same suffix and one entry
   answers for the other, and the confounded reading looks exactly like a
   clean one. No two entries in the table below share a suffix within a
   prefix, and the control deletes confirm which line produced which rule.

   Run on tailwindcss 4.3.3, 4.2.2 and 4.1.0 under Node 24.14.0. Identical
   results on all three. 41 entries across 12 namespaces, all 41 generate.

     namespace                   n  documented  generates  sample utility
     --color-*                   7  yes         yes        bg-bw-ground
     --border-width-*            3  NO          yes        border-bw
     --radius-*                  1  yes         yes        rounded-bw
     --font-*                    3  yes         yes        font-bw-display
     --font-weight-*             2  yes         yes        font-bw-bold
     --text-*                    8  yes         yes        text-bw-mega
     --leading-*                 3  yes         yes        leading-bw-flush
     --tracking-*                2  yes         yes        tracking-bw-tight
     --spacing-*                 9  yes         yes        p-bw-4
     --container-*               1  yes         yes        max-w-bw
     --grid-template-columns-*   1  NO          yes        grid-cols-bw
     --animate-*                 1  yes         yes        animate-bw-marquee

   Tailwind 4.0.0 is UNTESTED, and untested is not passing. Installing it
   here and compiling raised `Missing field negated on ScannerOptions.sources`
   from the native scanner before any of this file was read, so the harness
   never reached a result to report. No claim is made about 4.0.0 either way.

   TWO NAMESPACES CARRY A CAVEAT.

   The documented namespace table lists twenty namespaces. Two of the eleven
   used here are absent from it: --border-width-* and
   --grid-template-columns-*. The engine processes both anyway, and both
   compile to what you would want:

     .border-bw    { border-style: var(--tw-border-style);
                     border-width: var(--bw-rule); }
     .grid-cols-bw { grid-template-columns:
                       repeat(var(--bw-grid-columns), minmax(0, 1fr)); }

   Controls, so those results are not artifacts of how they were measured:

     Delete the three --border-width-* lines and recompile: all three
     selectors disappear. Delete the --grid-template-columns-* line and
     .grid-cols-bw disappears. Those lines are what produce them.

     Add --border-style-probe-s: dashed and recompile: no .border-probe-s
     and no .border-style-probe-s appear anywhere. A namespace Tailwind does
     not process fails silently and produces nothing, which is the failure
     this verification exists to catch, and the same harness sees the
     difference between that and a namespace that works.

   Both stay because they work, and because border-bw and grid-cols-bw are
   the names a reader expects to find. Both are flagged because an
   undocumented namespace comes with no compatibility promise, and a future
   release can drop either without that counting as a breaking change.

   If either is dropped, the escape hatch needs no new token, because the
   values already live in tokens.css.

     border-bw     ->  border-(length:--bw-rule)
     border-t-bw   ->  border-t-(length:--bw-rule)
     border-b-bw   ->  border-b-(length:--bw-rule)
     border-x-bw   ->  border-x-(length:--bw-rule)
                       border-[length:var(--bw-rule)] is the longhand

   THE length: HINT IS LOAD-BEARING. Drop it and Tailwind reads the variable
   as a color instead of a length. The class still compiles, the rule is
   still valid CSS, and no border width is set by it at all:

     border-(--bw-rule)          border-color: var(--bw-rule);
     border-[var(--bw-rule)]     border-color: var(--bw-rule);
     border-t-(--bw-rule)        border-top-color: var(--bw-rule);
     border-t-[var(--bw-rule)]   border-top-color: var(--bw-rule);

   That is a border color declared as 2px, which sets nothing and warns about
   nothing. All four shapes were compiled on all three versions to confirm
   it. Take the hinted forms above and no others.

   The grid escape route needs no hint, and that asymmetry was measured
   rather than assumed. grid-template-columns accepts no color, so there is
   no ambiguity for a hint to resolve:

     grid-cols-bw  ->  grid-cols-[repeat(var(--bw-grid-columns),minmax(0,1fr))]

   A SECOND TRAP, ADJACENT AND EASY TO WALK INTO. --columns-* looks like the
   namespace a column count belongs in. It is not. Compiled, --columns-* is
   CSS multi-column: a probe entry of 7 emits `columns: 7`, which flows the
   element's content into seven newspaper columns and lays out no grid at
   all. The matching grid-cols-* utility is not generated by it. That is why
   the grid entry below maps through --grid-template-columns-* and spells out
   the track list, so the utility emits real columns with the var() surviving
   into the output.

   THE MARQUEE ENTRY HAS A DEPENDENCY, NOT A CAVEAT. animate-bw-marquee
   compiles to `animation: bw-marquee var(--bw-marquee-duration) linear
   infinite`, and Tailwind emits no @keyframes for it: the output was
   searched for `@keyframes bw-marquee` and does not contain it. The
   keyframes live in structure.css, next to the marquee component and its
   prefers-reduced-motion handling. Use this utility without loading
   structure.css and you get an animation naming keyframes that do not
   exist, which browsers treat as no animation at all.

   ONE MORE, FOUND BY COMPILING RATHER THAN BY READING. font-family and
   font-weight share the `font-` utility prefix. Give --font-bw-clash and
   --font-weight-bw-clash the same suffix and the single font-bw-clash
   utility emits font-family alone; the weight is dropped with no error. The
   weights below are therefore named -regular and -bold, which collide with
   none of the three family names.

   On Tailwind v3 none of these questions come up: borderWidth and
   gridTemplateColumns are both first-class theme keys and preset.js uses
   them.

   Usage in your stylesheet:

     @import "tailwindcss";
     @import "./path/to/tokens/theme.css";

   theme.css pulls in tokens.css itself, so one import is enough.
   ========================================================================== */

@import "./tokens.css";

@theme inline {
  /* Color */
  --color-bw-ground: var(--bw-ground);
  --color-bw-ink: var(--bw-ink);
  --color-bw-ink-muted: var(--bw-ink-muted);
  --color-bw-shade: var(--bw-shade);
  --color-bw-link: var(--bw-link);
  --color-bw-link-visited: var(--bw-link-visited);
  --color-bw-alarm: var(--bw-alarm);

  /* Rule width. Undocumented namespace, verified above. */
  --border-width-bw: var(--bw-rule);
  --border-width-bw-heavy: var(--bw-rule-heavy);
  --border-width-bw-hair: var(--bw-rule-hair);

  /* Radius. One entry, and its value is zero. It is mapped anyway so that
     rounded-bw exists and keeps meaning whatever tokens.css says it means. */
  --radius-bw: var(--bw-radius);

  /* Type */
  --font-bw-display: var(--bw-font-display);
  --font-bw-text: var(--bw-font-text);
  --font-bw-mono: var(--bw-font-mono);

  --font-weight-bw-regular: var(--bw-weight-text);
  --font-weight-bw-bold: var(--bw-weight-bold);

  --text-bw-mega: var(--bw-text-mega);
  --text-bw-display: var(--bw-text-display);
  --text-bw-h1: var(--bw-text-h1);
  --text-bw-h2: var(--bw-text-h2);
  --text-bw-h3: var(--bw-text-h3);
  --text-bw-body: var(--bw-text-body);
  --text-bw-sm: var(--bw-text-sm);
  --text-bw-xs: var(--bw-text-xs);

  --leading-bw-flush: var(--bw-leading-flush);
  --leading-bw-tight: var(--bw-leading-tight);
  --leading-bw-text: var(--bw-leading-text);

  --tracking-bw-tight: var(--bw-tracking-tight);
  --tracking-bw-wide: var(--bw-tracking-wide);

  /* Space. Named to sit alongside Tailwind's own scale, not to replace it. */
  --spacing-bw-1: var(--bw-space-1);
  --spacing-bw-2: var(--bw-space-2);
  --spacing-bw-3: var(--bw-space-3);
  --spacing-bw-4: var(--bw-space-4);
  --spacing-bw-6: var(--bw-space-6);
  --spacing-bw-8: var(--bw-space-8);
  --spacing-bw-12: var(--bw-space-12);
  --spacing-bw-16: var(--bw-space-16);
  --spacing-bw-24: var(--bw-space-24);

  --container-bw: var(--bw-container);

  /* The exposed grid. Undocumented namespace, and the track list is spelled
     out here rather than passed as a count, for the --columns-* reason
     above. */
  --grid-template-columns-bw: repeat(var(--bw-grid-columns), minmax(0, 1fr));

  /* Motion. The keyframes this names are in structure.css, per the note
     above. */
  --animate-bw-marquee: bw-marquee var(--bw-marquee-duration) linear infinite;
}

/* Not mapped, on purpose:

   There is no --ease-* entry because tokens.css declares no easing, and no
   --shadow-* entry because it declares no shadow. Both absences are the
   register rather than an oversight; structure.css states them as rules. */