/* Generated by tools/build-tokens.py. Do not edit.
   Source: tokens/base.json + tokens/clients/motif-digital.json */
:root {
  /* Cards, panels. */
  --border-radius-lg: 16px;
  /* Buttons, small cards. */
  --border-radius-md: 8px;
  /* Square corners. */
  --border-radius-none: 0px;
  /* Pill buttons and chips. */
  --border-radius-pill: 9999px;
  /* Inputs, badges. */
  --border-radius-sm: 4px;
  /* Large media and hero panels. */
  --border-radius-xl: 24px;
  /* Focus ring width. */
  --border-width-focus: 2px;
  /* Emphasised outlines. */
  --border-width-thick: 2px;
  /* Dividers and outlined controls. */
  --border-width-thin: 1px;
  /* Desktop. Sidebar nav appears. */
  --breakpoints-lg: 1024px;
  /* Tablets. Mobile layouts end here. */
  --breakpoints-md: 768px;
  /* Large phones. */
  --breakpoints-sm: 640px;
  /* Wide desktop. */
  --breakpoints-xl: 1280px;
  /* Text and icons placed on top of the white action fill. The primary button never carries white text. */
  --color-brand-ink: #000000;
  /* The action color. Motif's identity is monochrome, so the primary button is a white fill with black text — the highest-contrast thing on a black page. Aliased from neutral.white so that `bg-brand-primary` keeps working as the action utility across every component. */
  --color-brand-primary: #FFFFFF;
  /* Primary action on hover and focus. Off-white so the button settles rather than flashing. */
  --color-brand-primary-hover: #EDEDED;
  /* The action color dropped to a dark tint. Backgrounds for chips, badges and quiet callouts where a white fill would shout. */
  --color-brand-primary-muted: #262626;
  /* Hover state for raised panels and list rows. */
  --color-neutral-100: #141414;
  /* Default borders, dividers and input outlines at rest. */
  --color-neutral-200: #262626;
  /* Emphasised borders and outlined controls that need to be visible without lighting up. */
  --color-neutral-300: #3D3D3D;
  /* Disabled labels, placeholders and inactive icons. */
  --color-neutral-400: #5C5C5C;
  /* Barely-lifted surface. Cards and panels that should separate from black by shadow more than value. */
  --color-neutral-50: #0A0A0A;
  /* Secondary text: captions, metadata, helper copy, service-list detail. Never body text. */
  --color-neutral-500: #9B9B9B;
  /* Long-form body copy on black. Softer than white so paragraphs do not vibrate. */
  --color-neutral-700: #C7C7C7;
  /* Section bands that need to read as a different plane from pure black. */
  --color-neutral-900: #0F0F0F;
  /* Pure black. The page surface for the whole site — not an accent. */
  --color-neutral-black: #000000;
  /* Off-white. Hover state for inverted (light) controls so they do not flash pure white. */
  --color-neutral-light: #EDEDED;
  /* Primary text, headings and logo on the black surface. */
  --color-neutral-white: #FFFFFF;
  /* Dividers, card edges and input borders at rest. */
  --color-semantic-border-default: #262626;
  /* Focus ring. White on black is the strongest available ring and it stays on-brand. Never remove an outline without replacing it with this. */
  --color-semantic-border-focus: #FFFFFF;
  /* Outlined controls and emphasised edges. */
  --color-semantic-border-strong: #3D3D3D;
  /* Alternating full-bleed section band that breaks up a long black page. */
  --color-semantic-surface-band: #0F0F0F;
  /* Page background. Every page and every gallery frame starts here. */
  --color-semantic-surface-default: #000000;
  /* Inverted blocks: white controls, light proof sections, print-style callouts. */
  --color-semantic-surface-inverse: #FFFFFF;
  /* Inverted control on hover. */
  --color-semantic-surface-inverse-hover: #EDEDED;
  /* Cards, panels and service tiles lifted off the page. */
  --color-semantic-surface-raised: #0A0A0A;
  /* Raised panel on hover. */
  --color-semantic-surface-raised-hover: #141414;
  /* Numbers, results and single highlighted words inside a heading. Emphasis in a monochrome system comes from value and weight, not hue — this is white against body gray, so it only reads when the surrounding copy is text.body or text.secondary. */
  --color-semantic-text-accent: #FFFFFF;
  /* Paragraphs and long-form copy on black. */
  --color-semantic-text-body: #C7C7C7;
  /* Disabled labels and placeholders. */
  --color-semantic-text-disabled: #5C5C5C;
  /* Text on inverted (white) surfaces — the primary button label, light proof blocks. */
  --color-semantic-text-inverse: #000000;
  /* Headings and short copy on the black surface. */
  --color-semantic-text-primary: #FFFFFF;
  /* Captions, metadata, eyebrows, helper copy. */
  --color-semantic-text-secondary: #9B9B9B;
  /* Page container. Section frames clamp to this. */
  --max-width-content: 1280px;
  /* Readable line length for long copy. */
  --max-width-prose: 65ch;
  /* Reveals, drawers, accordions. */
  --motion-duration-base: 250ms;
  /* Hover and focus transitions. */
  --motion-duration-feedback: 150ms;
  /* Press feedback. */
  --motion-duration-instant: 80ms;
  /* Large panels and page-level motion. */
  --motion-duration-slow: 400ms;
  /* Elements entering the screen. */
  --motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
  /* Elements leaving the screen. */
  --motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
  /* Default: fast out, gentle settle. */
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  /* Disabled controls. Fill and text untouched; the whole control drops. */
  --opacity-disabled: 0.38;
  /* De-emphasised text and icons. */
  --opacity-quiet: 0.6;
  /* White halo for the single hero CTA or an active data card. One per screen — in a monochrome system this is the only 'lit' state available, so spending it twice flattens both. */
  --shadow-glow: 0 0 0 1px rgba(255,255,255,0.35), 0 8px 32px rgba(255,255,255,0.12);
  /* Modals and floating panels. */
  --shadow-lg: 0 24px 64px rgba(0,0,0,0.95);
  /* Hovered cards and dropdowns on black. */
  --shadow-md: 0 8px 24px rgba(0,0,0,0.9);
  /* Resting cards on black. Shadow separates less than a border does here — pair it with a border. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.8);
  /* Minimum tap target for buttons and inputs. */
  --size-control-height: 44px;
  /* Feature icons. */
  --size-icon-lg: 32px;
  /* Default icon box in buttons and nav. */
  --size-icon-md: 24px;
  /* Inline icon beside text. */
  --size-icon-sm: 16px;
  /* No space. */
  --spacing-0: 0px;
  /* Hairline gaps, icon-to-label. */
  --spacing-1: 4px;
  /* Page gutter desktop. */
  --spacing-10: 40px;
  /* Gap between blocks inside a section. */
  --spacing-12: 48px;
  /* Section padding mobile. */
  --spacing-16: 64px;
  /* Tight inline gaps. */
  --spacing-2: 8px;
  /* Section padding desktop. */
  --spacing-24: 96px;
  /* Control padding block. */
  --spacing-3: 12px;
  /* Hero padding desktop. */
  --spacing-32: 128px;
  /* Default gap between related items. */
  --spacing-4: 16px;
  /* Control padding inline. */
  --spacing-5: 20px;
  /* Card padding, page gutter mobile. */
  --spacing-6: 24px;
  /* Gap between groups. */
  --spacing-8: 32px;
  /* Default UI and body face: paragraphs, nav, buttons, labels, everything not a headline. */
  --typography-font-family-body: Geist, 'Helvetica Neue', Arial, sans-serif;
  /* Headlines, hero copy and section titles — the `font-heading` utility, which is the name the generated style guide and gallery pages expect. Chosen to echo the actual 'motif' wordmark: heavy lowercase with flared, wedge-like terminals. Variable optical size — set it large, heavy (700-900) and tight. Below 24px the flare disappears and it just reads as a serif, so use the body face instead. */
  --typography-font-family-heading: Fraunces, 'Times New Roman', Georgia, serif;
  /* Data and proof: metrics, dashboard figures, eyebrows, channel tags, code. Signals 'measured' — do not use it for prose. */
  --typography-font-family-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* 24px. Section subheadings. */
  --typography-font-size-2xl: 1.5rem;
  /* 30px. H3. */
  --typography-font-size-3xl: 1.875rem;
  /* 36px. H2 / mobile H1. */
  --typography-font-size-4xl: 2.25rem;
  /* 48px. H1. */
  --typography-font-size-5xl: 3rem;
  /* 60px. Hero display. */
  --typography-font-size-6xl: 3.75rem;
  /* 72px. Oversized hero display, desktop only. */
  --typography-font-size-7xl: 4.5rem;
  /* 16px. Body copy and controls. */
  --typography-font-size-base: 1rem;
  /* 18px. Lead paragraphs. */
  --typography-font-size-lg: 1.125rem;
  /* 14px. Captions, metadata, small controls. */
  --typography-font-size-sm: 0.875rem;
  /* 20px. Card titles. */
  --typography-font-size-xl: 1.25rem;
  /* 12px. Eyebrows, legal, badges. */
  --typography-font-size-xs: 0.75rem;
  /* Headings. */
  --typography-font-weight-bold: 700;
  /* Labels, nav items, emphasised body. */
  --typography-font-weight-medium: 500;
  /* Body copy. */
  --typography-font-weight-regular: 400;
  /* Buttons and subheadings. */
  --typography-font-weight-semibold: 600;
  /* Body. */
  --typography-letter-spacing-normal: 0em;
  /* Large display headings set in the display face. */
  --typography-letter-spacing-tight: -0.03em;
  /* Uppercase mono eyebrows and channel labels. */
  --typography-letter-spacing-wide: 0.12em;
  /* Buttons and inputs. */
  --typography-line-height-control: 1.25;
  /* Body copy. */
  --typography-line-height-normal: 1.5;
  /* Subheadings and card titles. */
  --typography-line-height-snug: 1.25;
  /* Display and headings. */
  --typography-line-height-tight: 1.1;
}