/* Semantic aliases over the Figma Variables in fig-tokens.css.
   fig-tokens.css carries the full 825-variable set (light on :root, dark on [data-theme="dark"] / .dark).
   These shorter names are convenience handles for hand-written HTML; they resolve through the same variables
   so dark mode follows automatically. Lengths are converted from the unitless Figma floats to px. */
:root, :root[data-theme="dark"], .dark, [data-theme="dark"] {
  /* Type */
  --font-display: var(--font-family-font-family-display), -apple-system, "Segoe UI", sans-serif;
  --font-body: var(--font-family-font-family-body), -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, monospace;

  /* Text */
  --text-primary: var(--colors-text-text-primary-900);
  --text-secondary: var(--colors-text-text-secondary-700);
  --text-tertiary: var(--colors-text-text-tertiary-600);
  --text-quaternary: var(--colors-text-text-quaternary-500);
  --text-placeholder: var(--colors-text-text-placeholder);
  --text-brand: var(--colors-text-text-brand-secondary-700);
  --text-on-brand: var(--colors-text-text-primary-on-brand);
  --text-error: var(--colors-text-text-error-primary-600);

  /* Surfaces */
  --surface-page: var(--colors-background-bg-primary);
  --surface-card: var(--colors-background-bg-primary);
  --surface-subtle: var(--colors-background-bg-secondary);
  --surface-hover: var(--colors-background-bg-primary-hover);
  --surface-active: var(--colors-background-bg-active);
  --surface-inverse: var(--colors-background-bg-primary-solid);
  --surface-brand: var(--colors-background-bg-brand-solid);
  --surface-brand-hover: var(--colors-background-bg-brand-solid-hover);
  --surface-brand-section: var(--colors-background-bg-brand-section);

  /* Borders */
  --border-primary: var(--colors-border-border-primary);
  --border-secondary: var(--colors-border-border-secondary);
  --border-brand: var(--colors-border-border-brand);
  --border-error: var(--colors-border-border-error);

  /* Foreground (icons) */
  --fg-primary: var(--colors-foreground-fg-primary-900);
  --fg-secondary: var(--colors-foreground-fg-secondary-700);
  --fg-quaternary: var(--colors-foreground-fg-quaternary-400);
  --fg-brand: var(--colors-foreground-fg-brand-primary-600);

  /* Radius (px) */
  --r-xxs: calc(var(--radius-xxs) * 1px);
  --r-xs: calc(var(--radius-xs) * 1px);
  --r-sm: calc(var(--radius-sm) * 1px);
  --r-md: calc(var(--radius-md) * 1px);
  --r-lg: calc(var(--radius-lg) * 1px);
  --r-xl: calc(var(--radius-xl) * 1px);
  --r-2xl: calc(var(--radius-2xl) * 1px);
  --r-3xl: calc(var(--radius-3xl) * 1px);
  --r-4xl: calc(var(--radius-4xl) * 1px);
  --r-full: 9999px;

  /* Spacing (px) */
  --sp-xxs: calc(var(--spacing-xxs) * 1px);
  --sp-xs: calc(var(--spacing-xs) * 1px);
  --sp-sm: calc(var(--spacing-sm) * 1px);
  --sp-md: calc(var(--spacing-md) * 1px);
  --sp-lg: calc(var(--spacing-lg) * 1px);
  --sp-xl: calc(var(--spacing-xl) * 1px);
  --sp-2xl: calc(var(--spacing-2xl) * 1px);
  --sp-3xl: calc(var(--spacing-3xl) * 1px);
  --sp-4xl: calc(var(--spacing-4xl) * 1px);
  --sp-5xl: calc(var(--spacing-5xl) * 1px);
  --sp-6xl: calc(var(--spacing-6xl) * 1px);
  --sp-7xl: calc(var(--spacing-7xl) * 1px);
  --sp-8xl: calc(var(--spacing-8xl) * 1px);
  --sp-9xl: calc(var(--spacing-9xl) * 1px);
  --sp-10xl: calc(var(--spacing-10xl) * 1px);
  --sp-11xl: calc(var(--spacing-11xl) * 1px);

  /* Layout */
  --container-max: calc(var(--container-max-width-desktop) * 1px);
  --container-pad: calc(var(--container-padding-desktop) * 1px);
  --container-pad-mobile: calc(var(--container-padding-mobile) * 1px);

  /* Shadows — geometry from the file's effect styles, colours from the Effects/Shadows variables */
  --shadow-xs: 0px 1px 2px 0px var(--colors-effects-shadows-shadow-xs);
  --shadow-sm: 0px 1px 3px 0px var(--colors-effects-shadows-shadow-sm-01), 0px 1px 2px -1px var(--colors-effects-shadows-shadow-sm-02);
  --shadow-md: 0px 4px 6px -1px var(--colors-effects-shadows-shadow-md-01), 0px 2px 4px -2px var(--colors-effects-shadows-shadow-md-02);
  --shadow-lg: 0px 12px 16px -4px var(--colors-effects-shadows-shadow-lg-01), 0px 4px 6px -2px var(--colors-effects-shadows-shadow-lg-02), 0px 2px 2px -1px var(--colors-effects-shadows-shadow-lg-03);
  --shadow-xl: 0px 20px 24px -4px var(--colors-effects-shadows-shadow-xl-01), 0px 8px 8px -4px var(--colors-effects-shadows-shadow-xl-02), 0px 3px 3px -1.5px var(--colors-effects-shadows-shadow-xl-03);
  --shadow-2xl: 0px 24px 48px -12px var(--colors-effects-shadows-shadow-2xl-01), 0px 4px 4px -2px var(--colors-effects-shadows-shadow-2xl-02);
  --shadow-3xl: 0px 32px 64px -12px var(--colors-effects-shadows-shadow-3xl-01), 0px 5px 5px -2.5px var(--colors-effects-shadows-shadow-3xl-02);
  --shadow-skeuomorphic: inset 0px 0px 0px 1px var(--colors-effects-shadows-shadow-skeumorphic-inner-border), inset 0px -2px 0px 0px var(--colors-effects-shadows-shadow-skeumorphic-inner);
  --focus-ring: 0 0 0 2px var(--colors-background-bg-primary), 0 0 0 4px var(--colors-effects-focus-rings-focus-ring);
  --focus-ring-error: 0 0 0 2px var(--colors-background-bg-primary), 0 0 0 4px var(--colors-effects-focus-rings-focus-ring-error);
}