### Install Lyne Design Tokens

Source: https://github.com/sbb-design-systems/lyne-design-tokens/blob/main/README.md

Install the Lyne Design Tokens as a development dependency using npm.

```bash
npm install --save-dev @sbb-esta/lyne-design-tokens
```

--------------------------------

### Import and Use JSON Token Files

Source: https://context7.com/sbb-design-systems/lyne-design-tokens/llms.txt

Utilize flat or raw JSON token files for tooling integration, design system documentation, or custom build pipelines. Examples show accessing tokens by key and iterating over color tokens.

```javascript
// Import flat JSON (simple key-value pairs)
import tokens from '@sbb-esta/lyne-design-tokens/dist/js/sbb-tokens.json';

console.log(tokens['sbb-color-red']);           // "#eb0000"
console.log(tokens['sbb-spacing-fixed-4x']);    // "1rem"
console.log(tokens['sbb-border-radius-4x']);    // "0.5rem"
console.log(tokens['sbb-breakpoint-large-min']); // "64rem"

// Iterate over all color tokens
const colorTokens = Object.entries(tokens)
  .filter(([key]) => key.startsWith('sbb-color-'))
  .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});

// Import raw JSON (nested structure with metadata)
import rawTokens from '@sbb-esta/lyne-design-tokens/dist/js/sbb-tokens-raw.json';

// Access token with full metadata including original values and references
rawTokens.tokens.forEach(token => {
  console.log({
    name: token.name,
    value: token.value,
    type: token.type,
    originalValue: token.original?.value,
    hasReference: !!token.refOriginal
  });
});
```

--------------------------------

### Import and Use JavaScript ES Module Tokens

Source: https://context7.com/sbb-design-systems/lyne-design-tokens/llms.txt

Import specific tokens for use in JavaScript/TypeScript applications, such as CSS-in-JS solutions or runtime theming. Examples show usage with styled-components, React inline styles, and icon sizing.

```javascript
// Import specific tokens
import { 
  SbbColorRed,
  SbbColorWhite,
  SbbColorCharcoal,
  SbbSpacingFixed4x,
  SbbBorderRadius4x,
  SbbTypoFontFamily,
  SbbAnimationDuration2x,
  SbbAnimationEasing,
  SbbSizeIconUiSmall,
  SbbSizeIconUiLarge,
  SbbLayoutBasePageMaxWidth
} from '@sbb-esta/lyne-design-tokens';

// Use in styled-components
const Button = styled.button`
  background-color: ${SbbColorRed};
  color: ${SbbColorWhite};
  font-family: ${SbbTypoFontFamily};
  padding: ${SbbSpacingFixed4x};
  border-radius: ${SbbBorderRadius4x};
  transition: background-color ${SbbAnimationDuration2x} ${SbbAnimationEasing};
`;

// Use in React inline styles
const cardStyle = {
  backgroundColor: SbbColorWhite,
  color: SbbColorCharcoal,
  padding: SbbSpacingFixed4x,
  borderRadius: SbbBorderRadius4x,
  maxWidth: SbbLayoutBasePageMaxWidth
};

// Use for icon sizing
const iconConfig = {
  small: { size: SbbSizeIconUiSmall },
  large: { size: SbbSizeIconUiLarge }
};

console.log(SbbColorRed);           // "#eb0000"
console.log(SbbSpacingFixed4x);     // "1rem" (16px converted)
console.log(SbbAnimationDuration2x); // "0.08s"
console.log(SbbTypoFontFamily);     // '"SBB", "Helvetica Neue", Helvetica, Arial, sans-serif'
```

--------------------------------

### Use CSS Color Tokens

Source: https://context7.com/sbb-design-systems/lyne-design-tokens/llms.txt

Apply color tokens using CSS variables for various purposes, including grayscale, brand, off-brand, semantic, and extended palette colors. Examples demonstrate usage with different background and text colors.

```css
/* Grayscale colors (from dark to light) */
.dark-bg { background: var(--sbb-color-black); }      /* #000000 */
.dark-bg { background: var(--sbb-color-midnight); }   /* #151515 */
.dark-bg { background: var(--sbb-color-charcoal); }   /* #212121 */
.dark-bg { background: var(--sbb-color-iron); }       /* #444444 */
.mid-bg { background: var(--sbb-color-smoke); }       /* #8d8d8d */
.mid-bg { background: var(--sbb-color-cement); }      /* #bdbdbd */
.light-bg { background: var(--sbb-color-cloud); }     /* #e5e5e5 */
.light-bg { background: var(--sbb-color-milk); }      /* #f6f6f6 */
.light-bg { background: var(--sbb-color-white); }     /* #ffffff */

/* Brand red colors */
.brand { background: var(--sbb-color-red); }          /* #eb0000 - Primary brand */
.brand-light { background: var(--sbb-color-red85); }  /* #ff3838 - Light variant */
.brand-dark { background: var(--sbb-color-red125); }  /* #c60018 - Dark variant */
.brand-darker { background: var(--sbb-color-red150); } /* #a20013 - Darker variant */

/* Off-brand colors (royal blue with light/dark variants) */
.offbrand { color: var(--sbb-color-royal); }          /* light-dark auto */
.offbrand-text { color: var(--sbb-color-royal-light); } /* #06348b */
.offbrand-text { color: var(--sbb-color-royal-dark); }  /* #0053ef */

/* Functional/semantic colors with automatic light-dark support */
.primary { background: var(--sbb-color-primary); }    /* Theme-aware primary */
.error { color: var(--sbb-color-error); }             /* Theme-aware error */
.success { color: var(--sbb-color-success); }         /* Green */
.warning { color: var(--sbb-color-warning); }         /* Peach */
.brand-accent { color: var(--sbb-color-brand); }      /* Theme-aware brand */

/* Extended palette (all with light/dark variants) */
.sky { color: var(--sbb-color-sky); }
.night { color: var(--sbb-color-night); }
.violet { color: var(--sbb-color-violet); }
.pink { color: var(--sbb-color-pink); }
.autumn { color: var(--sbb-color-autumn); }
.orange { color: var(--sbb-color-orange); }
.green { color: var(--sbb-color-green); }
.turquoise { color: var(--sbb-color-turquoise); }
```

--------------------------------

### Build Token Formats

Source: https://context7.com/sbb-design-systems/lyne-design-tokens/llms.txt

Execute the build script to generate CSS, SCSS, and JS token files from source.

```bash
# Build all token formats
npm run build

# Output structure after build:
# dist/
#   css/sbb-variables.css          - CSS custom properties
#   scss/sbb-variables.scss        - SCSS variables
#   scss/sbb-variables-as-css.scss - SCSS mixins with CSS variables
#   js/sbb-tokens.js               - ES module exports
#   js/sbb-tokens.d.ts             - TypeScript declarations
#   js/sbb-tokens.json             - Flat JSON format
#   js/sbb-tokens-raw.json         - Extended JSON with metadata
```

--------------------------------

### Apply Layout Tokens

Source: https://context7.com/sbb-design-systems/lyne-design-tokens/llms.txt

Implement responsive grid systems, page constraints, and gutters using layout tokens.

```css
/* Page max width */
.container {
  max-width: var(--sbb-layout-base-page-max-width); /* 75rem (1200px) */
  margin-inline: auto;
}

/* Responsive grid columns */
/* zero: 4 columns, small: 8 columns, large: 12 columns, ultra: 16 columns */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--sbb-grid-base-columns), 1fr);
  gap: var(--sbb-grid-base-gutter-responsive);
}

/* Responsive gutters */
/* zero: 16px, small: 24px, large/ultra: 32px */
.grid-gap { gap: var(--sbb-grid-base-gutter-responsive); }

/* Responsive page offset/padding */
/* zero: 20px, small: 48px, large: 64px, ultra: 120px */
.page {
  padding-inline: var(--sbb-layout-base-offset-responsive);
}

/* Complete responsive layout example */
.page-layout {
  max-width: var(--sbb-layout-base-page-max-width);
  margin-inline: auto;
  padding-inline: var(--sbb-layout-base-offset-responsive);
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(var(--sbb-grid-base-columns), 1fr);
  gap: var(--sbb-grid-base-gutter-responsive);
}
```

--------------------------------

### Apply Size Tokens

Source: https://context7.com/sbb-design-systems/lyne-design-tokens/llms.txt

Define responsive element heights and fixed icon dimensions for consistent component sizing.

```css
/* Responsive element heights (adapt to breakpoints) */
/* xxxs: 28px (zero/small) -> 32px (large/ultra) */
.element-xxxs { min-height: var(--sbb-size-element-xxxs); }

/* xxs: 32px (zero/small) -> 36px (large/ultra) */
.element-xxs { min-height: var(--sbb-size-element-xxs); }

/* xs: 36px (zero/small) -> 40px (large/ultra) */
.element-xs { min-height: var(--sbb-size-element-xs); }

/* s: 44px (zero/small) -> 48px (large/ultra) */
.element-s { min-height: var(--sbb-size-element-s); }

/* m: 48px (zero/small) -> 56px (large/ultra) */
.element-m { min-height: var(--sbb-size-element-m); }

/* l: 56px (zero/small) -> 64px (large/ultra) */
.element-l { min-height: var(--sbb-size-element-l); }

/* Icon sizes (fixed values) */
.icon-xs {
  width: var(--sbb-size-icon-ui-extra-small);   /* 1rem (16px) */
  height: var(--sbb-size-icon-ui-extra-small);
}

.icon-sm {
  width: var(--sbb-size-icon-ui-small);         /* 1.5rem (24px) */
  height: var(--sbb-size-icon-ui-small);
}

.icon-md {
  width: var(--sbb-size-icon-ui-medium);        /* 2.25rem (36px) */
  height: var(--sbb-size-icon-ui-medium);
}

.icon-lg {
  width: var(--sbb-size-icon-ui-large);         /* 3rem (48px) */
  height: var(--sbb-size-icon-ui-large);
}

/* Button with responsive sizing */
.button-medium {
  min-height: var(--sbb-size-element-m);
  padding: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);
}
```

--------------------------------

### Configure Style Dictionary Build

Source: https://context7.com/sbb-design-systems/lyne-design-tokens/llms.txt

Define the build configuration for transforming design tokens into various platform-specific formats.

```typescript
// config.ts - Build configuration example
import type { Config } from 'style-dictionary/types';
import tokens from './designTokens/index.js';

export const config: Config = {
  tokens,
  platforms: {
    css: {
      buildPath: 'dist/css/',
      prefix: 'sbb',
      transformGroup: 'css',
      transforms: ['name/kebab', 'custom/transform/pxToRem'],
      files: [{
        destination: 'sbb-variables.css',
        format: 'custom/format/css/variables'
      }]
    },
    js: {
      buildPath: 'dist/js/',
      prefix: 'sbb',
      transformGroup: 'js',
      transforms: ['custom/transform/pxToRem', 'time/seconds'],
      files: [{
        destination: 'sbb-tokens.js',
        format: 'javascript/es6'
      }]
    }
  }
};
```

--------------------------------

### Apply Animation Tokens

Source: https://context7.com/sbb-design-systems/lyne-design-tokens/llms.txt

Use these tokens to define transition durations, easing functions, and keyframe animations.

```css
/* Animation durations */
.quick { transition-duration: var(--sbb-animation-duration-1x); }    /* 40ms */
.fast { transition-duration: var(--sbb-animation-duration-2x); }     /* 80ms */
.normal { transition-duration: var(--sbb-animation-duration-3x); }   /* 120ms */
.medium { transition-duration: var(--sbb-animation-duration-4x); }   /* 160ms */
.slow { transition-duration: var(--sbb-animation-duration-5x); }     /* 200ms */
.slower { transition-duration: var(--sbb-animation-duration-6x); }   /* 240ms */
.slowest { transition-duration: var(--sbb-animation-duration-12x); } /* 480ms */

/* Easing function */
.smooth { transition-timing-function: var(--sbb-animation-easing); }
/* cubic-bezier(.47, .1, 1, .63) */

/* Combined animation example */
.button {
  transition:
    background-color var(--sbb-animation-duration-2x) var(--sbb-animation-easing),
    transform var(--sbb-animation-duration-3x) var(--sbb-animation-easing);
}

.fade-in {
  animation: fadeIn var(--sbb-animation-duration-4x) var(--sbb-animation-easing);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
```

--------------------------------

### Apply Focus and Hover Tokens in CSS

Source: https://context7.com/sbb-design-systems/lyne-design-tokens/llms.txt

Use these CSS custom properties to implement accessible focus states and hover effects.

```css
/* Focus outline styling */
.focusable:focus-visible {
  outline: var(--sbb-focus-outline-width) solid var(--sbb-focus-outline-color);
  outline-offset: var(--sbb-focus-outline-offset);
}

/* Focus outline offset */
.focus-offset { outline-offset: var(--sbb-focus-outline-offset); } /* 0.1875rem (3px) */

/* Focus colors (light-dark aware) */
.focus-default { outline-color: var(--sbb-focus-outline-color-default); } /* black */
.focus-dark { outline-color: var(--sbb-focus-outline-color-dark); }       /* white */
.focus-auto { outline-color: var(--sbb-focus-outline-color); }            /* light-dark auto */

/* Hover brightness for images */
.image-hover:hover {
  filter: brightness(var(--sbb-hover-image-brightness)); /* 1.075 */
}

/* Complete interactive element example */
.interactive-card {
  transition:
    box-shadow var(--sbb-animation-duration-2x) var(--sbb-animation-easing),
    filter var(--sbb-animation-duration-2x) var(--sbb-animation-easing);
}

.interactive-card:hover {
  box-shadow: var(--sbb-box-shadow-level-5-soft);
}

.interactive-card:focus-visible {
  outline: var(--sbb-focus-outline-width) solid var(--sbb-focus-outline-color);
  outline-offset: var(--sbb-focus-outline-offset);
}
```

--------------------------------

### Apply Spacing Tokens

Source: https://context7.com/sbb-design-systems/lyne-design-tokens/llms.txt

Use fixed spacing tokens for constant values or responsive spacing tokens for breakpoint-aware layouts.

```css
/* Fixed spacing (1x = 4px, converted to rem) */
.tight { padding: var(--sbb-spacing-fixed-1x); }    /* 0.25rem (4px) */
.normal { padding: var(--sbb-spacing-fixed-2x); }   /* 0.5rem (8px) */
.normal { padding: var(--sbb-spacing-fixed-3x); }   /* 0.75rem (12px) */
.normal { padding: var(--sbb-spacing-fixed-4x); }   /* 1rem (16px) */
.normal { padding: var(--sbb-spacing-fixed-6x); }   /* 1.5rem (24px) */
.normal { padding: var(--sbb-spacing-fixed-8x); }   /* 2rem (32px) */
.loose { padding: var(--sbb-spacing-fixed-12x); }   /* 3rem (48px) */
.loose { padding: var(--sbb-spacing-fixed-16x); }   /* 4rem (64px) */
.loose { padding: var(--sbb-spacing-fixed-24x); }   /* 6rem (96px) */
.loose { padding: var(--sbb-spacing-fixed-30x); }   /* 7.5rem (120px) */

/* Responsive spacing (values change per breakpoint) */
/* xxxs: 12px (zero/small) -> 16px (large/ultra) */
.section { padding: var(--sbb-spacing-responsive-xxxs); }

/* xs: 20px (zero/small) -> 24px (large/ultra) */
.section { padding: var(--sbb-spacing-responsive-xs); }

/* s: 24px (zero/small) -> 32px (large/ultra) */
.section { padding: var(--sbb-spacing-responsive-s); }

/* m: 32px (zero/small) -> 40px (large) -> 48px (ultra) */
.section { padding: var(--sbb-spacing-responsive-m); }

/* l: 32px (zero) -> 40px (small) -> 56px (large) -> 64px (ultra) */
.section { padding: var(--sbb-spacing-responsive-l); }

/* xl: 32px (zero) -> 48px (small) -> 80px (large) -> 96px (ultra) */
.section { padding: var(--sbb-spacing-responsive-xl); }

/* xxl: 48px (zero) -> 72px (small) -> 96px (large) -> 120px (ultra) */
.section { padding: var(--sbb-spacing-responsive-xxl); }
```

--------------------------------

### JavaScript Breakpoint Usage

Source: https://context7.com/sbb-design-systems/lyne-design-tokens/llms.txt

Import and use breakpoint constants in JavaScript to dynamically create media queries or check current viewport conditions. This allows for client-side responsive logic.

```javascript
// JavaScript breakpoint usage
import {
  SbbBreakpointZeroMin,
  SbbBreakpointZeroMax,
  SbbBreakpointSmallMin,
  SbbBreakpointSmallMax,
  SbbBreakpointLargeMin,
  SbbBreakpointLargeMax,
  SbbBreakpointUltraMin,
  SbbBreakpointUltraMax
} from '@sbb-esta/lyne-design-tokens';

const breakpoints = {
  zero: { min: SbbBreakpointZeroMin, max: SbbBreakpointZeroMax },
  small: { min: SbbBreakpointSmallMin, max: SbbBreakpointSmallMax },
  large: { min: SbbBreakpointLargeMin, max: SbbBreakpointLargeMax },
  ultra: { min: SbbBreakpointUltraMin, max: SbbBreakpointUltraMax }
};

// Create media query
const isDesktop = window.matchMedia(`(min-width: ${SbbBreakpointLargeMin})`).matches;
```

--------------------------------

### Use CSS Variables

Source: https://context7.com/sbb-design-systems/lyne-design-tokens/llms.txt

Import and use CSS custom properties for tokens in your stylesheets. Supports automatic light/dark mode.

```css
/* Import the CSS file in your stylesheet */
@import '@sbb-esta/lyne-design-tokens/dist/css/sbb-variables.css';

/* Use the tokens in your CSS */
.card {
  background-color: var(--sbb-color-white);
  color: var(--sbb-color-charcoal);
  padding: var(--sbb-spacing-fixed-4x);
  border-radius: var(--sbb-border-radius-4x);
  box-shadow: var(--sbb-box-shadow-level-3-soft);
  font-family: var(--sbb-typo-font-family);
}

.button {
  background-color: var(--sbb-color-red);
  color: var(--sbb-color-white);
  min-height: var(--sbb-size-element-m);
  padding: var(--sbb-spacing-responsive-s) var(--sbb-spacing-responsive-m);
  border-radius: var(--sbb-border-radius-2x);
  transition: background-color var(--sbb-animation-duration-2x) var(--sbb-animation-easing);
}

.button:hover {
  background-color: var(--sbb-color-red125);
}

/* Responsive spacing automatically adapts to breakpoints */
.section {
  padding: var(--sbb-spacing-responsive-xl);
  margin-bottom: var(--sbb-spacing-responsive-xxl);
}

/* Semantic colors with light/dark mode support */
.alert-error {
  background-color: var(--sbb-color-error);
}

.alert-success {
  background-color: var(--sbb-color-success);
}
```

--------------------------------

### CSS Breakpoint Tokens

Source: https://context7.com/sbb-design-systems/lyne-design-tokens/llms.txt

Use these CSS variables to apply responsive styles based on predefined breakpoints. Ensure your CSS includes the necessary media queries.

```css
/* Breakpoint values */
/* zero:  0px - 599px */
/* small: 600px - 1023px */
/* large: 1024px - 1439px */
/* ultra: 1440px - 2579px */

/* Using breakpoint tokens in media queries */
@media (min-width: 600px) {  /* --sbb-breakpoint-small-min */
  .container { padding: var(--sbb-spacing-responsive-m); }
}

@media (min-width: 1024px) { /* --sbb-breakpoint-large-min */
  .container { padding: var(--sbb-spacing-responsive-l); }
}

@media (min-width: 1440px) { /* --sbb-breakpoint-ultra-min */
  .container { padding: var(--sbb-spacing-responsive-xl); }
}
```

--------------------------------

### Use SCSS Variables

Source: https://context7.com/sbb-design-systems/lyne-design-tokens/llms.txt

Import and use Sass variables for tokens in your preprocessed stylesheets. Allows direct use in Sass functions.

```scss
// Import Sass variables
@use '@sbb-esta/lyne-design-tokens/dist/scss/sbb-variables' as tokens;

// Use tokens directly
.heading {
  font-family: tokens.$sbb-typo-font-family;
  font-size: tokens.$sbb-typo-scale-2x;
  line-height: tokens.$sbb-typo-line-height-heading;
  letter-spacing: tokens.$sbb-typo-letter-spacing-heading;
  color: tokens.$sbb-color-charcoal;
}

.container {
  max-width: tokens.$sbb-layout-base-page-max-width;
  padding-inline: tokens.$sbb-spacing-fixed-6x;
}

.icon-small {
  width: tokens.$sbb-size-icon-ui-small;
  height: tokens.$sbb-size-icon-ui-small;
}

.icon-large {
  width: tokens.$sbb-size-icon-ui-large;
  height: tokens.$sbb-size-icon-ui-large;
}
```

--------------------------------

### CSS Border Tokens

Source: https://context7.com/sbb-design-systems/lyne-design-tokens/llms.txt

Apply consistent border widths and radii using CSS variables. These tokens ensure uniformity across the UI, with predefined values for different border thicknesses and corner roundness.

```css
/* Border widths (base: 1px) */
.thin-border { border-width: var(--sbb-border-width-1x); }    /* 0.0625rem (1px) */
.medium-border { border-width: var(--sbb-border-width-2x); }  /* 0.125rem (2px) */
.thick-border { border-width: var(--sbb-border-width-3x); }   /* 0.1875rem (3px) */
.heavy-border { border-width: var(--sbb-border-width-4x); }   /* 0.25rem (4px) */

/* Border radius (base: 2px) */
.subtle-radius { border-radius: var(--sbb-border-radius-1x); }   /* 0.125rem (2px) */
.small-radius { border-radius: var(--sbb-border-radius-2x); }    /* 0.25rem (4px) */
.medium-radius { border-radius: var(--sbb-border-radius-4x); }   /* 0.5rem (8px) */
.large-radius { border-radius: var(--sbb-border-radius-6x); }    /* 0.75rem (12px) */
.xlarge-radius { border-radius: var(--sbb-border-radius-8x); }   /* 1rem (16px) */
.pill-radius { border-radius: var(--sbb-border-radius-16x); }    /* 2rem (32px) */

/* Combined border styling */
.card {
  border: var(--sbb-border-width-1x) solid var(--sbb-border-color-4);
  border-radius: var(--sbb-border-radius-4x);
}

.button {
  border: var(--sbb-border-width-2x) solid var(--sbb-color-charcoal);
  border-radius: var(--sbb-border-radius-2x);
}
```

--------------------------------

### Apply Typography Tokens

Source: https://context7.com/sbb-design-systems/lyne-design-tokens/llms.txt

Use typography tokens for font family, scale, line heights, letter spacing, and semantic text or heading sizes.

```css
/* Font family */
.text {
  font-family: var(--sbb-typo-font-family);
  /* "SBB", "Helvetica Neue", Helvetica, Arial, sans-serif */
}

/* Typography scale (base: 16px) */
.text-xxs { font-size: var(--sbb-typo-scale-0-75x); }    /* 0.75rem (12px) */
.text-xs { font-size: var(--sbb-typo-scale-0-875x); }    /* 0.875rem (14px) */
.text-sm { font-size: var(--sbb-typo-scale-default); }   /* 1rem (16px) */
.text-md { font-size: var(--sbb-typo-scale-1-125x); }    /* 1.125rem (18px) */
.text-lg { font-size: var(--sbb-typo-scale-1-25x); }     /* 1.25rem (20px) */
.text-xl { font-size: var(--sbb-typo-scale-1-5x); }      /* 1.5rem (24px) */
.text-2xl { font-size: var(--sbb-typo-scale-2x); }       /* 2rem (32px) */
.text-3xl { font-size: var(--sbb-typo-scale-2-5x); }     /* 2.5rem (40px) */
.text-4xl { font-size: var(--sbb-typo-scale-3x); }       /* 3rem (48px) */
.text-5xl { font-size: var(--sbb-typo-scale-3-5x); }     /* 3.5rem (56px) */
.text-6xl { font-size: var(--sbb-typo-scale-4x); }       /* 4rem (64px) */

/* Line heights */
.heading { line-height: var(--sbb-typo-line-height-heading); }  /* 1.4 */
.body { line-height: var(--sbb-typo-line-height-text); }        /* 1.75 */

/* Letter spacing */
.heading { letter-spacing: var(--sbb-typo-letter-spacing-heading); }  /* 0em */
.body { letter-spacing: var(--sbb-typo-letter-spacing-text); }        /* 0.03em */

/* Semantic text sizes (responsive on large breakpoint) */
.text-size-xl { font-size: var(--sbb-text-font-size-xl); }  /* 1.25rem -> 1.5rem */
.text-size-l { font-size: var(--sbb-text-font-size-l); }    /* 1.125rem -> 1.25rem */
.text-size-m { font-size: var(--sbb-text-font-size-m); }    /* 1rem -> 1.125rem */
.text-size-s { font-size: var(--sbb-text-font-size-s); }    /* 0.875rem -> 1rem */
.text-size-xs { font-size: var(--sbb-text-font-size-xs); }  /* 0.75rem -> 0.875rem */

/* Semantic heading sizes (theme and breakpoint aware) */
.h1 { font-size: var(--sbb-heading-font-size-1); }
.h2 { font-size: var(--sbb-heading-font-size-2); }
.h3 { font-size: var(--sbb-heading-font-size-3); }
.h4 { font-size: var(--sbb-heading-font-size-4); }
.h5 { font-size: var(--sbb-heading-font-size-5); }
.h6 { font-size: var(--sbb-heading-font-size-6); }
```

--------------------------------

### SCSS CSS Variables with Mixins

Source: https://context7.com/sbb-design-systems/lyne-design-tokens/llms.txt

Utilize SCSS mixins to apply CSS variables for breakpoint-aware styling and theme support. Includes options for standard, lean, off-brand, and safety themes, plus forced colors mode.

```scss
// Import the mixin file
@use '@sbb-esta/lyne-design-tokens/dist/scss/sbb-variables-as-css' as sbb;

// Configure theme (optional, defaults to 'standard')
$theme: 'lean';

// Apply base tokens at root level
:root {
  @include sbb.base;
}

// Apply responsive breakpoints
@media (min-width: 600px) {
  :root {
    @include sbb.breakpoint-small;
  }
}

@media (min-width: 1024px) {
  :root {
    @include sbb.breakpoint-large;
  }
}

@media (min-width: 1440px) {
  :root {
    @include sbb.breakpoint-ultra;
  }
}

// Forced colors mode support for accessibility
@media (forced-colors: active) {
  :root {
    @include sbb.forced-colors;
  }
}

// Then use CSS variables in components
.title {
  font-size: var(--sbb-heading-font-size-1);
  margin-block: var(--sbb-heading-margin-block-1);
}

.text {
  font-size: var(--sbb-text-font-size-m);
}
```

--------------------------------

### CSS Shadow Tokens

Source: https://context7.com/sbb-design-systems/lyne-design-tokens/llms.txt

Apply consistent elevation and depth to elements using predefined shadow tokens. These tokens offer soft and hard variants suitable for various UI components and themes.

```css
/* Pre-composed box shadows (soft shadows for subtle elevation) */
.card { box-shadow: var(--sbb-box-shadow-level-3-soft); }      /* Subtle elevation */
.dropdown { box-shadow: var(--sbb-box-shadow-level-5-soft); }  /* Medium elevation */
.modal { box-shadow: var(--sbb-box-shadow-level-9-soft); }     /* High elevation */
.overlay { box-shadow: var(--sbb-box-shadow-level-11-soft); }  /* Maximum elevation */

/* Hard shadows for stronger visual impact */
.card-hard { box-shadow: var(--sbb-box-shadow-level-3-hard); }
.dropdown-hard { box-shadow: var(--sbb-box-shadow-level-5-hard); }
.modal-hard { box-shadow: var(--sbb-box-shadow-level-9-hard); }

/* Negative (dark background) variants */
.dark-card { box-shadow: var(--sbb-box-shadow-level-3-soft-negative); }
.dark-modal { box-shadow: var(--sbb-box-shadow-level-9-hard-negative); }

/* Individual shadow components for custom compositions */
.custom-shadow {
  box-shadow:
    var(--sbb-shadow-level-5-shadow-1) var(--sbb-shadow-color-soft-1),
    var(--sbb-shadow-level-5-shadow-2) var(--sbb-shadow-color-soft-2);
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.