/*
 * Generated by design-system/scripts/build.ts from design-system/tokens/layar.json.
 * Do not edit. Change the tokens and run: pnpm --filter @omnia/design-system build
 */

:root {
  --layar-color-ground: #141518;
  --layar-color-raise-1: #1B1D21;
  --layar-color-raise-2: #23262B;
  --layar-color-raise-3: #2D3036;
  --layar-color-raise-4: #3A3E45;
  --layar-color-text-primary: #ECE6DC;
  --layar-color-text-secondary: #B0AAA2;
  --layar-color-text-tertiary: #948F88;
  --layar-color-text-hover: #FFFFFF;
  --layar-color-text-on-light: #141518;
  --layar-color-text-on-pay: #FFFFFF;
  --layar-color-text-on-koin: #1A1405;
  --layar-color-accent-saga: #F04A2F;
  --layar-color-accent-saga-deep: #D93A20;
  --layar-color-accent-koin: #F2C14E;
  --layar-color-status-error: #F04A2F;
  --layar-color-status-success: #ECE6DC;
  --layar-color-status-live: #F04A2F;
  --layar-color-focus-ring: #ECE6DC;
  --layar-color-border-divider: rgba(236, 230, 220, 0.1);
  --layar-color-border-divider-subtle: rgba(236, 230, 220, 0.08);
  --layar-color-border-outline: rgba(236, 230, 220, 0.28);
  --layar-color-border-card-rest: rgba(236, 230, 220, 0.14);
  --layar-color-border-divider-strong: rgba(236, 230, 220, 0.18);
  --layar-color-border-badge: rgba(236, 230, 220, 0.2);
  --layar-color-border-selected: #ECE6DC;
  --layar-color-fill-secondary-button: rgba(236, 230, 220, 0.14);
  --layar-color-fill-secondary-button-tv: rgba(236, 230, 220, 0.16);
  --layar-color-fill-progress-track: rgba(236, 230, 220, 0.28);
  --layar-color-fill-player-track: rgba(236, 230, 220, 0.25);
  --layar-color-fill-player-buffered: rgba(236, 230, 220, 0.35);
  --layar-color-overlay-tab-bar: rgba(20, 21, 24, 0.95);
  --layar-color-overlay-sheet-scrim: rgba(12, 13, 15, 0.74);
  --layar-color-overlay-icon-button-scrim: rgba(20, 21, 24, 0.5);
  --layar-color-overlay-chip-scrim: rgba(20, 21, 24, 0.7);
  --layar-color-overlay-tv-panel: rgba(27, 29, 33, 0.94);
  --layar-font-family-ui: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-font-family-title: "Newsreader", "Georgia", serif;
  --layar-font-weight-regular: 400;
  --layar-font-weight-medium: 500;
  --layar-font-weight-semibold: 600;
  --layar-font-weight-bold: 700;
  --layar-font-weight-extrabold: 800;
  --layar-typography-phone-title-fallback-font-family: "Newsreader", "Georgia", serif;
  --layar-typography-phone-title-fallback-font-size: 34px;
  --layar-typography-phone-title-fallback-line-height: 38px;
  --layar-typography-phone-title-fallback-font-weight: 500;
  --layar-typography-phone-title-fallback-letter-spacing: -0.015em;
  --layar-typography-phone-heading-page-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-phone-heading-page-font-size: 28px;
  --layar-typography-phone-heading-page-line-height: 34px;
  --layar-typography-phone-heading-page-font-weight: 700;
  --layar-typography-phone-heading-page-letter-spacing: -0.01em;
  --layar-typography-phone-price-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-phone-price-font-size: 26px;
  --layar-typography-phone-price-line-height: 26px;
  --layar-typography-phone-price-font-weight: 700;
  --layar-typography-phone-price-letter-spacing: -0.02em;
  --layar-typography-phone-heading-item-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-phone-heading-item-font-size: 22px;
  --layar-typography-phone-heading-item-line-height: 28px;
  --layar-typography-phone-heading-item-font-weight: 700;
  --layar-typography-phone-heading-item-letter-spacing: 0em;
  --layar-typography-phone-heading-sheet-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-phone-heading-sheet-font-size: 20px;
  --layar-typography-phone-heading-sheet-line-height: 26px;
  --layar-typography-phone-heading-sheet-font-weight: 700;
  --layar-typography-phone-heading-sheet-letter-spacing: 0em;
  --layar-typography-phone-heading-row-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-phone-heading-row-font-size: 18px;
  --layar-typography-phone-heading-row-line-height: 24px;
  --layar-typography-phone-heading-row-font-weight: 700;
  --layar-typography-phone-heading-row-letter-spacing: 0em;
  --layar-typography-phone-body-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-phone-body-font-size: 16px;
  --layar-typography-phone-body-line-height: 24px;
  --layar-typography-phone-body-font-weight: 400;
  --layar-typography-phone-body-letter-spacing: 0em;
  --layar-typography-phone-title-tile-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-phone-title-tile-font-size: 16px;
  --layar-typography-phone-title-tile-line-height: 22px;
  --layar-typography-phone-title-tile-font-weight: 600;
  --layar-typography-phone-title-tile-letter-spacing: 0em;
  --layar-typography-phone-button-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-phone-button-font-size: 16px;
  --layar-typography-phone-button-line-height: 20px;
  --layar-typography-phone-button-font-weight: 700;
  --layar-typography-phone-button-letter-spacing: 0em;
  --layar-typography-phone-meta-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-phone-meta-font-size: 14px;
  --layar-typography-phone-meta-line-height: 20px;
  --layar-typography-phone-meta-font-weight: 500;
  --layar-typography-phone-meta-letter-spacing: 0em;
  --layar-typography-phone-secondary-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-phone-secondary-font-size: 14px;
  --layar-typography-phone-secondary-line-height: 20px;
  --layar-typography-phone-secondary-font-weight: 400;
  --layar-typography-phone-secondary-letter-spacing: 0em;
  --layar-typography-phone-button-small-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-phone-button-small-font-size: 14px;
  --layar-typography-phone-button-small-line-height: 20px;
  --layar-typography-phone-button-small-font-weight: 600;
  --layar-typography-phone-button-small-letter-spacing: 0em;
  --layar-typography-phone-caption-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-phone-caption-font-size: 12px;
  --layar-typography-phone-caption-line-height: 16px;
  --layar-typography-phone-caption-font-weight: 400;
  --layar-typography-phone-caption-letter-spacing: 0em;
  --layar-typography-phone-access-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-phone-access-font-size: 12px;
  --layar-typography-phone-access-line-height: 16px;
  --layar-typography-phone-access-font-weight: 600;
  --layar-typography-phone-access-letter-spacing: 0em;
  --layar-typography-phone-tab-label-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-phone-tab-label-font-size: 12px;
  --layar-typography-phone-tab-label-line-height: 16px;
  --layar-typography-phone-tab-label-font-weight: 600;
  --layar-typography-phone-tab-label-letter-spacing: 0em;
  --layar-typography-phone-tab-label-active-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-phone-tab-label-active-font-size: 12px;
  --layar-typography-phone-tab-label-active-line-height: 16px;
  --layar-typography-phone-tab-label-active-font-weight: 700;
  --layar-typography-phone-tab-label-active-letter-spacing: 0em;
  --layar-typography-phone-category-nav-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-phone-category-nav-font-size: 16px;
  --layar-typography-phone-category-nav-line-height: 20px;
  --layar-typography-phone-category-nav-font-weight: 700;
  --layar-typography-phone-category-nav-letter-spacing: 0em;
  --layar-typography-phone-wordmark-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-phone-wordmark-font-size: 16px;
  --layar-typography-phone-wordmark-line-height: 20px;
  --layar-typography-phone-wordmark-font-weight: 800;
  --layar-typography-phone-wordmark-letter-spacing: 0.18em;
  --layar-typography-web-body-hero-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-web-body-hero-font-size: 18px;
  --layar-typography-web-body-hero-line-height: 28px;
  --layar-typography-web-body-hero-font-weight: 400;
  --layar-typography-web-body-hero-letter-spacing: 0em;
  --layar-typography-web-heading-row-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-web-heading-row-font-size: 22px;
  --layar-typography-web-heading-row-line-height: 28px;
  --layar-typography-web-heading-row-font-weight: 700;
  --layar-typography-web-heading-row-letter-spacing: 0em;
  --layar-typography-web-meta-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-web-meta-font-size: 16px;
  --layar-typography-web-meta-line-height: 22px;
  --layar-typography-web-meta-font-weight: 500;
  --layar-typography-web-meta-letter-spacing: 0em;
  --layar-typography-web-title-tile-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-web-title-tile-font-size: 16px;
  --layar-typography-web-title-tile-line-height: 22px;
  --layar-typography-web-title-tile-font-weight: 600;
  --layar-typography-web-title-tile-letter-spacing: 0em;
  --layar-typography-web-nav-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-web-nav-font-size: 16px;
  --layar-typography-web-nav-line-height: 20px;
  --layar-typography-web-nav-font-weight: 600;
  --layar-typography-web-nav-letter-spacing: 0em;
  --layar-typography-web-button-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-web-button-font-size: 16px;
  --layar-typography-web-button-line-height: 20px;
  --layar-typography-web-button-font-weight: 700;
  --layar-typography-web-button-letter-spacing: 0em;
  --layar-typography-web-secondary-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-web-secondary-font-size: 14px;
  --layar-typography-web-secondary-line-height: 20px;
  --layar-typography-web-secondary-font-weight: 400;
  --layar-typography-web-secondary-letter-spacing: 0em;
  --layar-typography-web-access-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-web-access-font-size: 14px;
  --layar-typography-web-access-line-height: 20px;
  --layar-typography-web-access-font-weight: 600;
  --layar-typography-web-access-letter-spacing: 0em;
  --layar-typography-web-wordmark-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-web-wordmark-font-size: 16px;
  --layar-typography-web-wordmark-line-height: 20px;
  --layar-typography-web-wordmark-font-weight: 800;
  --layar-typography-web-wordmark-letter-spacing: 0.18em;
  --layar-typography-tv-display-code-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-tv-display-code-font-size: 96px;
  --layar-typography-tv-display-code-line-height: 104px;
  --layar-typography-tv-display-code-font-weight: 700;
  --layar-typography-tv-display-code-letter-spacing: 0.08em;
  --layar-typography-tv-heading-page-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-tv-heading-page-font-size: 56px;
  --layar-typography-tv-heading-page-line-height: 64px;
  --layar-typography-tv-heading-page-font-weight: 700;
  --layar-typography-tv-heading-page-letter-spacing: -0.01em;
  --layar-typography-tv-price-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-tv-price-font-size: 44px;
  --layar-typography-tv-price-line-height: 44px;
  --layar-typography-tv-price-font-weight: 700;
  --layar-typography-tv-price-letter-spacing: -0.02em;
  --layar-typography-tv-heading-row-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-tv-heading-row-font-size: 36px;
  --layar-typography-tv-heading-row-line-height: 44px;
  --layar-typography-tv-heading-row-font-weight: 700;
  --layar-typography-tv-heading-row-letter-spacing: 0em;
  --layar-typography-tv-nav-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-tv-nav-font-size: 28px;
  --layar-typography-tv-nav-line-height: 36px;
  --layar-typography-tv-nav-font-weight: 600;
  --layar-typography-tv-nav-letter-spacing: 0em;
  --layar-typography-tv-title-tile-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-tv-title-tile-font-size: 28px;
  --layar-typography-tv-title-tile-line-height: 36px;
  --layar-typography-tv-title-tile-font-weight: 600;
  --layar-typography-tv-title-tile-letter-spacing: 0em;
  --layar-typography-tv-body-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-tv-body-font-size: 28px;
  --layar-typography-tv-body-line-height: 40px;
  --layar-typography-tv-body-font-weight: 400;
  --layar-typography-tv-body-letter-spacing: 0em;
  --layar-typography-tv-meta-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-tv-meta-font-size: 28px;
  --layar-typography-tv-meta-line-height: 36px;
  --layar-typography-tv-meta-font-weight: 500;
  --layar-typography-tv-meta-letter-spacing: 0em;
  --layar-typography-tv-button-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-tv-button-font-size: 28px;
  --layar-typography-tv-button-line-height: 36px;
  --layar-typography-tv-button-font-weight: 700;
  --layar-typography-tv-button-letter-spacing: 0em;
  --layar-typography-tv-wordmark-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-tv-wordmark-font-size: 28px;
  --layar-typography-tv-wordmark-line-height: 36px;
  --layar-typography-tv-wordmark-font-weight: 800;
  --layar-typography-tv-wordmark-letter-spacing: 0.18em;
  --layar-typography-tv-access-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-tv-access-font-size: 22px;
  --layar-typography-tv-access-line-height: 28px;
  --layar-typography-tv-access-font-weight: 600;
  --layar-typography-tv-access-letter-spacing: 0em;
  --layar-typography-tv-caption-font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --layar-typography-tv-caption-font-size: 22px;
  --layar-typography-tv-caption-line-height: 28px;
  --layar-typography-tv-caption-font-weight: 400;
  --layar-typography-tv-caption-letter-spacing: 0em;
  --layar-space-4: 4px;
  --layar-space-8: 8px;
  --layar-space-12: 12px;
  --layar-space-16: 16px;
  --layar-space-20: 20px;
  --layar-space-28: 28px;
  --layar-space-36: 36px;
  --layar-space-56: 56px;
  --layar-border-width-hairline: 1px;
  --layar-border-width-selected: 1.5px;
  --layar-radius-art: 4px;
  --layar-radius-card: 8px;
  --layar-radius-sheet: 20px;
  --layar-radius-pill: 999px;
  --layar-layout-touch-target: 44px;
  --layar-layout-phone-margin: 20px;
  --layar-layout-phone-tile-gap: 8px;
  --layar-layout-phone-row-gap: 28px;
  --layar-layout-phone-row-title-gap: 12px;
  --layar-layout-phone-hero-to-rows: 36px;
  --layar-layout-phone-poster-width: 112px;
  --layar-layout-phone-poster-height: 168px;
  --layar-layout-phone-microdrama-poster-width: 128px;
  --layar-layout-phone-microdrama-poster-height: 192px;
  --layar-layout-phone-continue-tile-width: 228px;
  --layar-layout-phone-continue-tile-height: 128px;
  --layar-layout-phone-header-height: 56px;
  --layar-layout-phone-tab-bar-height: 72px;
  --layar-layout-phone-button-height: 52px;
  --layar-layout-phone-pay-button-height: 54px;
  --layar-layout-phone-compact-button-height: 48px;
  --layar-layout-phone-outline-button-height: 44px;
  --layar-layout-phone-chip-height: 36px;
  --layar-layout-phone-input-height: 52px;
  --layar-layout-phone-progress-height: 3px;
  --layar-layout-phone-live-dot: 8px;
  --layar-layout-phone-avatar: 56px;
  --layar-layout-web-margin: 56px;
  --layar-layout-web-tile-gap: 12px;
  --layar-layout-web-row-gap: 40px;
  --layar-layout-web-row-title-gap: 14px;
  --layar-layout-web-hero-to-rows: 64px;
  --layar-layout-web-poster-width: 168px;
  --layar-layout-web-poster-height: 252px;
  --layar-layout-web-continue-tile-width: 302px;
  --layar-layout-web-continue-tile-height: 170px;
  --layar-layout-web-header-height: 72px;
  --layar-layout-web-hero-text-width: 520px;
  --layar-layout-web-avatar: 32px;
  --layar-layout-tv-safe-area-x: 116px;
  --layar-layout-tv-safe-area-y: 56px;
  --layar-layout-tv-gutter: 40px;
  --layar-layout-tv-row-title-gap: 24px;
  --layar-layout-tv-card-width: 392px;
  --layar-layout-tv-card-height: 220px;
  --layar-layout-tv-microdrama-poster-width: 180px;
  --layar-layout-tv-microdrama-poster-height: 270px;
  --layar-layout-tv-nav-top: 40px;
  --layar-layout-tv-nav-height: 64px;
  --layar-layout-tv-nav-item-height: 56px;
  --layar-layout-tv-button-height: 72px;
  --layar-layout-tv-icon-button: 56px;
  --layar-layout-tv-avatar: 48px;
  --layar-layout-tv-live-dot: 14px;
  --layar-focus-web-ring-width: 3px;
  --layar-focus-web-ring-gap: 3px;
  --layar-focus-tv-ring-width: 4px;
  --layar-focus-tv-ring-gap: 4px;
  --layar-focus-tv-scale-card: 1.08;
  --layar-focus-tv-scale-button: 1.06;
}