/* GENERATED FILE - DO NOT EDIT. Source: design-tokens/nwp-tokens.css Regenerate: node scripts/sync-tokens.mjs Your edit here will be silently overwritten by the next sync. */ /* ========================================================================== NW PANTHERS - CANONICAL DESIGN TOKENS ========================================================================== THIS FILE IS THE ONLY PLACE A TOKEN VALUE IS DEFINED. It is copied - never edited in place - into both consumers by `node scripts/sync-tokens.mjs`: wp-content/themes/nw-panthers/assets/css/tokens.css (the live site) design-system/src/tokens.css (the React library) Before this file existed, those two maintained their own copies. They had already drifted: `--nwp-dur-standard` was `0.22s` in the theme and `220ms` in the design system. Identical in effect, and nothing would have told anyone if they had stopped being identical - which matters because the brand sheet and the brand guidelines are generated from the design system, while what a visitor actually sees comes from the theme. A guidelines document that documents different values from the shipped site is worse than no document at all. `scripts/check-tokens.mjs` fails the build if either copy has drifted. Editing either copy directly is pointless: the next sync overwrites it. ========================================================================== */ :root { --nwp-maroon: #5b0b24; --nwp-maroon-deep: #3e0718; --nwp-maroon-tint60: #c9a0b0; --nwp-maroon-tint40: #e0c6cf; --nwp-ink: #0a0a0c; --nwp-charcoal: #1a1a1f; --nwp-elevated: #2a2a32; --nwp-bone: #f5f1ea; --nwp-bone-dim: #b8b2a7; --nwp-white: #ffffff; --nwp-warm: #fbf9f7; /* 🔴 Dark grounds ONLY. 1.16:1 on white, 1.03:1 on bone. Club mode never defines this as an accent, and it is not in the editor palette. */ --nwp-lime: #d4ff3f; /* Light-ground accent and focus. 5.91:1 on white. */ --nwp-ochre: #8a5a12; /* 🔴 Reference only. A KIT colour, confirmed by the club chair (DEC-036). Never screen type. 1.52:1 on the maroon. */ --nwp-kit-black: #000000; /* ---------------------------------------------------------------------- FIXED TOKENS — colours that must NOT follow the mode ---------------------------------------------------------------------- 🔴 These exist because "hard-coded hex" was two different things wearing the same clothes, and a reader could not tell them apart. Some literals in this system are DELIBERATE. Text on a maroon field has to be literally white, because the mode block redefines custom properties but cannot reset an inherited `color`. The sponsor field has to be literally light, because a sponsor strip dropped inside Match mode must not go dark. Governance content has to be literally dark, for the same reason. Others were simply accidents — `#4A3F43` written out where `--nwp-text-muted` already existed. Naming the deliberate ones makes the accidental ones visible: from here on, a raw hex in a component is a bug by default. */ /* Always this colour, whatever the mode says. */ --nwp-fixed-white: #ffffff; --nwp-fixed-ink: #241c1f; --nwp-fixed-muted: #4a3f43; --nwp-fixed-subtle: #5a5257; --nwp-fixed-field: #fbf9f7; --nwp-fixed-rule: #d8d0cb; /* 3.34:1 on the light field — meaningful separation, not decoration. */ --nwp-fixed-rule-strong: #948680; --nwp-fixed-rule-soft: #e6e0dc; --nwp-fixed-rule-mid: #b9aea8; /* The focus ring for maroon grounds; ochre disappears against maroon. */ --nwp-fixed-focus-on-maroon: #d9a441; /* Photography. Both of these are consumed with a fallback, so neither can kill its declaration, but they are declared here anyway: the token check exists because an undefined --nwp-* has silently broken this project four times, and "mine is safe, trust me" is exactly the exemption that makes a gate useless. Declaring them costs nothing and keeps the rule absolute. --nwp-photo-focus per-figure art direction. Overridden on a .nwp-figure whose subject is off-centre; the default is centred. --nwp-nav-photo the navigation overlay's ground, supplied at runtime by nwp_photo_nav_ground() from the cleared pool. `none` is the correct resting state: before the photographs are imported the overlay is a plain maroon field. */ --nwp-photo-focus: 50% 50%; --nwp-nav-photo: none; /* Results. Always paired with a letterform AND a word — never colour alone. */ --nwp-win: #22c55e; --nwp-draw: #f59e0b; --nwp-loss: #ff6b5e; --nwp-result-ink: #0a0a0c; /* Spacing. Not editable — editors choose blocks; blocks carry their spacing. * * 🔴 TWO NAMES FOR EACH STEP, DELIBERATELY. * * WordPress rejects preset slugs that begin with a digit, so the theme.json * scale had to be renamed `xxl / xxxl / huge`. These custom properties are * ours and accept digits perfectly well, so the original `2xl / 3xl / 4xl` * names still work — but a stylesheet where half the authors reach for one * convention and half for the other produces UNDEFINED vars, and an * undefined var inside a shorthand silently drops the whole declaration. * That is not a theoretical risk: it wiped the padding off two panels. * * Both spellings therefore resolve, and neither is a mistake to write. */ --nwp-space-3xs: 0.125rem; --nwp-space-2xs: 0.25rem; --nwp-space-xs: 0.5rem; --nwp-space-sm: 0.75rem; --nwp-space-md: 1rem; --nwp-space-lg: 1.5rem; --nwp-space-xl: 2rem; --nwp-space-2xl: 3rem; --nwp-space-3xl: 4rem; --nwp-space-4xl: 6rem; --nwp-space-5xl: 8rem; /* Aliases matching the theme.json preset slugs, so the two vocabularies cannot drift apart. */ --nwp-space-xxxs: var( --nwp-space-3xs ); --nwp-space-xxs: var( --nwp-space-2xs ); --nwp-space-xxl: var( --nwp-space-2xl ); --nwp-space-xxxl: var( --nwp-space-3xl ); --nwp-space-huge: var( --nwp-space-4xl ); --nwp-space-colossal: var( --nwp-space-5xl ); /* Content widths. */ --nwp-container-match: 32.5rem; --nwp-container-reading: 42rem; --nwp-container-club: 70rem; --nwp-container-wide: 90rem; /* Shape. Square is the default; 2px belongs to primary actions alone. */ --nwp-radius-none: 0; --nwp-radius-action: 2px; --nwp-radius-full: 9999px; /* Elevation. Club only — depth effects are prohibited on dark grounds. */ --nwp-elev: 0 1px 2px rgba( 36, 28, 31, 0.08 ), 0 2px 8px rgba( 36, 28, 31, 0.06 ); /* Motion. */ --nwp-dur-fast: 0.12s; --nwp-dur-standard: 0.22s; --nwp-dur-reveal: 0.38s; --nwp-ease-standard: cubic-bezier( 0.4, 0, 0.2, 1 ); --nwp-ease-broadcast: cubic-bezier( 0.2, 0.9, 0.3, 1 ); --nwp-ease-entrance: cubic-bezier( 0.16, 0.84, 0.44, 1 ); /* Shear — 8°, one direction, never mirrored. */ --nwp-shear-angle: 8deg; --nwp-shear: skewX( -8deg ); --nwp-shear-counter: skewX( 8deg ); --nwp-shear-overhang-max: 5vw; /* Type roles, mapped onto the theme.json presets so components can read a role without knowing which family is currently standing in for it. */ --nwp-font-display: var( --wp--preset--font-family--display, "Archivo Black", Impact, sans-serif ); --nwp-font-compressed: var( --wp--preset--font-family--compressed, "Bebas Neue", Impact, sans-serif ); --nwp-font-heading: var( --wp--preset--font-family--heading, system-ui, sans-serif ); --nwp-font-text: var( --wp--preset--font-family--text, system-ui, sans-serif ); --nwp-font-mono: var( --wp--preset--font-family--mono, ui-monospace, monospace ); } /* ========================================================================== 2 CLUB MODE — light. The website. ========================================================================== */ [ data-nwp-mode='club' ] { --nwp-page: #ffffff; --nwp-surface: #f4f2f0; --nwp-surface-alt: #eae6e3; --nwp-surface-inverse: var( --nwp-maroon ); --nwp-text: #241c1f; --nwp-text-muted: #4a3f43; --nwp-text-on-inverse: #ffffff; --nwp-accent: var( --nwp-ochre ); --nwp-accent-strong: var( --nwp-maroon ); --nwp-on-accent: #ffffff; --nwp-hairline: #d8d0cb; --nwp-hairline-strong: #b9aea8; --nwp-focus: var( --nwp-ochre ); --nwp-rule-accent: var( --nwp-maroon ); --nwp-eyebrow-colour: var( --nwp-text-muted ); /* State tokens, non-lime. Club mode is light, so lime cannot function here. */ --nwp-state-live: var( --nwp-maroon ); --nwp-state-active: var( --nwp-maroon ); --nwp-state-followed: var( --nwp-maroon-tint60 ); --nwp-state-separator: var( --nwp-text-muted ); background-color: var( --nwp-page ); color: var( --nwp-text ); } /* ========================================================================== 3 MATCH MODE — dark. Fixtures, live scoring, results, standings. ========================================================================== */ [ data-nwp-mode='match' ] { --nwp-page: #0a0a0c; --nwp-surface: #1a1a1f; --nwp-surface-alt: #2a2a32; --nwp-surface-inverse: var( --nwp-maroon-deep ); --nwp-text: #f5f1ea; --nwp-text-muted: #b8b2a7; --nwp-text-on-inverse: #f5f1ea; --nwp-accent: var( --nwp-lime ); --nwp-accent-strong: var( --nwp-lime ); --nwp-on-accent: #0a0a0c; --nwp-hairline: rgba( 245, 241, 234, 0.1 ); --nwp-hairline-strong: rgba( 245, 241, 234, 0.22 ); --nwp-focus: var( --nwp-lime ); --nwp-rule-accent: var( --nwp-lime ); --nwp-eyebrow-colour: var( --nwp-text-muted ); --nwp-state-live: var( --nwp-lime ); --nwp-state-active: var( --nwp-lime ); --nwp-state-followed: var( --nwp-lime ); --nwp-state-separator: var( --nwp-lime ); background-color: var( --nwp-page ); color: var( --nwp-text ); } /* A complete lime-free rendering, for anyone who needs one. */ [ data-nwp-lime='off' ] { --nwp-state-live: var( --nwp-bone ); --nwp-state-active: var( --nwp-bone ); --nwp-state-followed: var( --nwp-hairline-strong ); --nwp-state-separator: var( --nwp-text-muted ); --nwp-accent: var( --nwp-bone ); --nwp-accent-strong: var( --nwp-bone ); --nwp-on-accent: var( --nwp-ink ); --nwp-focus: var( --nwp-bone ); --nwp-rule-accent: var( --nwp-bone ); } /* ========================================================================== 4 CALM MODE — safeguarding and policy templates. 🔴 Applied by the template and NOT switchable. Forces Club mode, removes every match-day affordance, and carries zero motion regardless of the user's preference. ========================================================================== */ [ data-nwp-calm='true' ] { --nwp-page: #ffffff; --nwp-surface: var( --nwp-warm ); --nwp-surface-alt: #f4f2f0; --nwp-text: #241c1f; --nwp-text-muted: #4a3f43; --nwp-accent: var( --nwp-ochre ); --nwp-accent-strong: var( --nwp-maroon ); --nwp-on-accent: #ffffff; --nwp-hairline: #d8d0cb; --nwp-hairline-strong: #b9aea8; --nwp-focus: var( --nwp-ochre ); /* 🔴 No lime reaches calm mode, by any route. */ --nwp-state-live: var( --nwp-maroon ); --nwp-state-active: var( --nwp-maroon ); --nwp-state-followed: var( --nwp-hairline-strong ); --nwp-state-separator: var( --nwp-text-muted ); background-color: var( --nwp-page ); color: var( --nwp-text ); } /* 🔴 Zero motion in calm mode, regardless of prefers-reduced-motion. */ [ data-nwp-calm='true' ] *, [ data-nwp-calm='true' ] *::before, [ data-nwp-calm='true' ] *::after { animation: none !important; transition: none !important; } /* 🔴 No shear anywhere in calm mode. */ [ data-nwp-calm='true' ] * { transform: none !important; } /* ========================================================================== 5 FOCUS — defined per surface, never as one global colour. A maroon ring on a maroon field is invisible. ========================================================================== */ :where( a, button, input, select, textarea, summary, [ tabindex ] ):focus-visible { outline: 3px solid var( --nwp-focus ); outline-offset: 2px; } /* Maroon fields get the gold ring — ochre on maroon does not separate. */ .nwp-on-maroon :where( a, button, input, select, textarea, summary ):focus-visible { outline-color: #d9a441; } /* ========================================================================== 6 REDUCED MOTION ========================================================================== */ @media ( prefers-reduced-motion: reduce ) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: var( --nwp-dur-fast ) !important; scroll-behavior: auto !important; } } /* ========================================================================== DESIGN-SYSTEM-ONLY TOKENS Used by the catalogue and specimen components, which have no equivalent on the live site. Defined here rather than locally so there remains exactly one file to read. ========================================================================== */ :root { /* An editorial serif used only in type specimens, never in product UI. */ --nwp-font-serif: Georgia, 'Times New Roman', serif; /* Longer durations reserved for catalogue demonstrations of motion, so a reader can actually see what a 220ms transition is doing. */ --nwp-dur-editorial: 0.6s; --nwp-dur-pulse: 1.8s; }