/**
 * GENERATED — do not edit.
 * Source: nl-design-tokens (tokens/*.tokens.json). Edit there, run `npm run build`.
 */

:root {
  --color-purple: #a29aff; /** Netlight Purple. The primary colour — strongest visual attribute connected to the brand, a carefully chosen balance between blue and red. */
  --color-purple-light: #c6c6ff; /** Light Purple. Medium/light shade — most appropriate for backgrounds. */
  --color-purple-dark: #785af2; /** Dark Purple. Mainly for text elements such as links; also interactive hovers and bold graphic elements. */
  --color-purple-active: #644bc9; /** Pressed/active state, one step darker than Dark Purple. */
  --color-yellow: #fff400; /** Yellow — the secondary colour, chosen for its strong contrast with the primary purple (opposite on the colour wheel). Ties back to Netlight's original gold. Good as both accent and background. */
  --color-yellow-light: #fff4a4; /** Yellow Light from the Figma Primitives collection. */
  --color-yellow-dark: #efd500; /** Yellow Dark from the Figma Primitives collection. */
  --color-orange-dark: #ff8010; /** Dark Orange, one of the four complementary colours. Complementary colours are special-case only, to accompany primary/secondary when the context needs more colour. */
  --color-orange-light: #ffd8bb; /** Orange Light from the Figma Primitives collection. */
  --color-orange: #ffa740; /** Orange Base from the Figma Primitives collection. */
  --color-green-dark: #4bbe37; /** Dark Green, one of the four complementary colours. */
  --color-green-light: #c8ffc0; /** Green Light from the Figma Primitives collection. */
  --color-green: #87eb7d; /** Green Base from the Figma Primitives collection. */
  --color-neutral-black: #000000; /** Black. Use as both accent and background, on text and shapes; pure black as standard, lighter shades when depth is needed (primarily product UI). */
  --color-neutral-grey-dark: #1a1a1a; /** Dark Grey — near-black, for body paragraphs in editorial layouts. */
  --color-neutral-grey-medium: #3c3c3c; /** Medium Grey — captions and metadata. */
  --color-neutral-grey-light: #eaeaea; /** Light Grey — the one quiet neutral border weight the brand uses. */
  --color-neutral-off-white: #f5f5f5; /** Off-white — depth in product UI. */
  --color-neutral-white: #ffffff; /** White. Natural clean-slate accent/background. Can look unfinished/sterile on backgrounds — use beige instead in those cases. */
  --color-neutral-beige: #fff0e6; /** Beige. Only use as background colour, never on text. Signals corporate/sophisticated-paper feel ("Make it Real"). Do not overuse. */
  --color-pink-light: #ffd4fe; /** Pink Light from the Figma Primitives collection. */
  --color-pink: #ff99ff; /** Pink Base from the Figma Primitives collection. */
  --color-pink-dark: #e166d5; /** Pink Dark from the Figma Primitives collection. */
  --color-blue-light: #c2f9ff; /** Blue Light from the Figma Primitives collection. */
  --color-blue: #6cdbff; /** Blue Base from the Figma Primitives collection. */
  --color-blue-dark: #00aadf; /** Blue Dark from the Figma Primitives collection. */
  --font-family-proxima: 'Proxima Nova'; /** Primary brand typeface. Versatile sans-serif — modern, plain, geometric. Weight differentiates hierarchy. Available weights: Regular (400), Italic (400i), Bold (700), Extrabold (800). */
  --font-family-video: Video; /** Secondary typeface. Mechanical, straight lines, sharp edges, pixel aesthetic. Sub-headlines, data points, quotes, numerics — never long body copy, mainly all-caps. Especially good on numbers. */
  --font-size-xs: 12px; /** Captions, tags, small labels. */
  --font-size-sm: 14px; /** UI labels, nav links. */
  --font-size: 16px; /** Body baseline. */
  --font-size-lg: 18px; /** Featured body, intro lede. */
  --font-size-xl: 24px; /** Sub-heading. */
  --font-size-2xl: 36px; /** Section heading. */
  --font-size-3xl: 48px; /** Display large. */
  --font-size-4xl: 60px; /** Display hero — Proxima Nova Extrabold. 60px ceiling reflects the brand's bold, large-format poster work. */
  --line-height-body: 1.55; /** Reading rhythm — slightly loose because Proxima Nova at regular weight needs air. */
  --line-height-tight: 1.1; /** Headlines — tight, editorial stacking. */
  --space-0: 0px; /** Spacing from Figma Primitives (0px). */
  --space-1: 4px; /** Spacing from Figma Primitives (4px). */
  --space-2: 8px; /** Spacing from Figma Primitives (8px). */
  --space-3: 12px; /** Spacing from Figma Primitives (12px). */
  --space-4: 16px; /** Spacing from Figma Primitives (16px). */
  --space-5: 20px; /** Spacing from Figma Primitives (20px). */
  --space-6: 24px; /** Spacing from Figma Primitives (24px). */
  --space-8: 32px; /** Spacing from Figma Primitives (32px). */
  --space-12: 48px; /** Spacing from Figma Primitives (48px). */
  --space-16: 64px; /** Spacing from Figma Primitives (64px). */
  --radius-none: 0px; /** Corner radius from Figma Primitives (0px). */
  --radius-small: 4px; /** Corner radius from Figma Primitives (4px). */
  --radius-medium: 8px; /** Corner radius from Figma Primitives (8px). */
  --radius-large: 16px; /** Corner radius from Figma Primitives (16px). */
  --radius-pill: 999px; /** Corner radius from Figma Primitives (999px). */
  --container-max: 1200px; /** Container max-width. Wide gutters on desktop enforce "Distinctive Spaces". */
  --container-gutter-desktop: 40px; /** Desktop gutter. */
  --container-gutter-tablet: 24px; /** Tablet gutter. */
  --container-gutter-phone: 16px; /** Phone gutter. */
  --motion-fast: 140ms; /** Exit — faster than enter, per the brand animation philosophy. */
  --motion: 200ms; /** Enter. */
  --section-y-desktop: 96px; /** Generous desktop section rhythm — air for large Proxima Nova headlines. */
  --section-y-tablet: 64px; /** Tablet section rhythm. */
  --section-y-phone: 40px; /** Phone section rhythm — compressed. */
  --elevation-shadow-raised: 0px 2px 4px -1px rgb(0% 0% 0% / 0.16), 0px 6px 10px 0px rgb(0% 0% 0% / 0.08); /** Soft raised elevation from the two-layer Figma effect style. */
  --elevation-shadow-hard: 8px 8px 0px 0px rgb(0% 0% 0%); /** Hard offset shadow: opaque black, 8px on both axes, no blur or spread. */
  --elevation-shadow-hard-small: 6px 6px 0px 0px rgb(0% 0% 0%); /** Small hard offset shadow: opaque black, 6px on both axes, no blur or spread. */
  --color-background: var(--color-neutral-white); /** Primary canvas for most pages and cards. */
  --color-background-subtle: var(--color-neutral-off-white); /** Off-white — depth in product UI. */
  --color-background-warm: var(--color-neutral-beige); /** Netlight Beige — corporate/editorial tone (whitepapers, consultant agreements). A "sophisticated paper" feel distinct from the white canvas. */
  --color-surface: var(--color-neutral-white); /** Card/panel surface on the white canvas. */
  --color-surface-raised: var(--color-neutral-off-white); /** Figma Semantic variable, surface/raised. */
  --color-text-primary: var(--color-neutral-black); /** Pure black — headlines, nav, labels. Netlight's typography is bold and black; never dark-gray headings. */
  --color-text-secondary: var(--color-neutral-grey-medium); /** Medium Grey — captions, secondary copy. */
  --color-text-on-brand: var(--color-neutral-black); /** Text/icon colour on --accent. Black, not white: black-on-purple reaches 8.60:1 WCAG contrast while white only reaches 2.44:1 (fails). Unusual choice but correct. */
  --color-text-on-light: var(--color-neutral-black); /** Figma Semantic variable, text/on-light. */
  --color-text-on-dark: var(--color-neutral-white); /** Figma Semantic variable, text/on-dark. */
  --color-text-on-accent-active: var(--color-neutral-white); /** White text on the active purple accent, which is too dark for black text at normal size. */
  --color-border: var(--color-neutral-grey-light); /** The one quiet neutral border weight. Netlight's primary separation tool is colour (colour-block sections), not lines. */
  --color-brand-primary: var(--color-purple); /** Netlight Purple. Brand anchor — backgrounds, CTAs, focus. Text on it must be black (see accent-on). */
  --color-brand-subtle: var(--color-purple-light); /** Figma Semantic variable, brand/subtle. */
  --color-accent-hover: var(--color-purple-dark); /** Hover state — Dark Purple, a named stop in the brand palette. */
  --color-accent-active: var(--color-purple-active); /** Pressed state, one step past Dark Purple. */
  --color-feedback-success: var(--color-green-dark); /** Netlight Dark Green — the darkest of the three green complementary shades. */
  --color-feedback-warning: var(--color-yellow); /** Netlight Yellow. Doubles as the semantic "warning" role and the brand's secondary/CTA colour — the two coincide here. Must always pair with black text (--warn-text is black; yellow on white fails contrast). */
  --color-feedback-danger: var(--color-orange-dark); /** Netlight Dark Orange — the darkest of the three orange complementary shades. */
  --color-background-surface: var(--color-surface); /** Semantic role from Figma Variables. */
  --color-text-muted: var(--color-text-secondary); /** Medium Grey — captions, secondary copy. */
  --color-text-on-accent: var(--color-text-on-brand); /** Black text on the default or hover brand accent; use on-accent-active for pressed purple. */
  --color-accent: var(--color-brand-primary); /** Netlight Purple. Brand anchor — backgrounds, CTAs, focus. Text on it must be black (see accent-on). */
  --color-text-meta: var(--color-text-muted); /** Alias — Netlight has no separate metadata tier. */
}