/* Generated from Figma Variables. First mode = :root default.
   FLOAT tokens are unitless — multiply by 1px in calc() where a length is needed. */

:root {
  --app-lock-screen-flashlight-margin-h: 54;
  --app-lock-screen-flashlight-margin-v: 24;
  --bg-primary-base: var(--system-white); /* @kind color */
  --color-accent-strong-hover: var(--color-green-950); /* @kind color */
  --color-accent-strong: var(--color-green-900); /* @kind color */
  --color-background-muted: var(--color-neutral-25); /* @kind color */
  --color-background-page: var(--color-neutral-50); /* @kind color */
  --color-background-row-hover: var(--color-ink-alpha-5); /* @kind color */
  --color-background-subtle-hover: var(--color-neutral-150); /* @kind color */
  --color-background-subtle: var(--color-neutral-100); /* @kind color */
  --color-background-surface-hover: var(--color-neutral-0-alpha-60); /* @kind color */
  --color-background-surface: var(--color-neutral-0); /* @kind color */
  --color-background-tag: var(--color-ink-alpha-7); /* @kind color */
  --color-black-base: rgb(0,0,0); /* @kind color */
  --color-blue-100: rgb(219,235,241); /* @kind color */
  --color-blue-200: rgb(213,237,247); /* @kind color */
  --color-border-default-2: var(--color-neutral-200-2); /* @kind color */
  --color-border-default: var(--color-neutral-200); /* @kind color */
  --color-border-divider: var(--color-neutral-300); /* @kind color */
  --color-category-blue-strong: var(--color-blue-200); /* @kind color */
  --color-category-blue-subtle: var(--color-blue-100); /* @kind color */
  --color-category-green-strong: var(--color-green-200); /* @kind color */
  --color-category-green-subtle: var(--color-green-100); /* @kind color */
  --color-category-lavender-emphasis: var(--color-lavender-500); /* @kind color */
  --color-category-lavender-strong: var(--color-lavender-200); /* @kind color */
  --color-category-lavender-subtle: var(--color-lavender-100); /* @kind color */
  --color-category-red-strong: var(--color-red-200); /* @kind color */
  --color-category-red-subtle: var(--color-red-100); /* @kind color */
  --color-category-sand-strong: var(--color-sand-200); /* @kind color */
  --color-category-sand-subtle: var(--color-sand-100); /* @kind color */
  --color-category-yellow-strong: var(--color-yellow-200); /* @kind color */
  --color-category-yellow-subtle: var(--color-yellow-100); /* @kind color */
  --color-feedback-error-subtle: var(--color-red-100); /* @kind color */
  --color-feedback-error: var(--color-red-600); /* @kind color */
  --color-feedback-success-subtle: var(--color-green-100); /* @kind color */
  --color-feedback-success: var(--color-green-900); /* @kind color */
  --color-feedback-warning-subtle: var(--color-yellow-100); /* @kind color */
  --color-focus-ring: var(--color-ink-base-2); /* @kind color */
  --color-green-100: rgb(230,242,219); /* @kind color */
  --color-green-200: rgb(215,234,197); /* @kind color */
  --color-green-900: rgb(54,83,20); /* @kind color */
  --color-green-950: rgb(42,65,16); /* @kind color */
  --color-ink-alpha-40: rgba(30,30,28,0.4); /* @kind color */
  --color-ink-alpha-50: rgba(30,30,28,0.5); /* @kind color */
  --color-ink-alpha-5: rgba(30,30,28,0.05); /* @kind color */
  --color-ink-alpha-64-2: rgba(30,30,28,0.64); /* @kind color */
  --color-ink-alpha-64: rgba(30,30,28,0.64); /* @kind color */
  --color-ink-alpha-76: rgba(30,30,28,0.76); /* @kind color */
  --color-ink-alpha-7: rgba(30,30,28,0.07); /* @kind color */
  --color-ink-base-2: rgb(30,30,28); /* @kind color */
  --color-ink-base: rgb(30,30,28); /* @kind color */
  --color-interactive-inverse: var(--color-black-base); /* @kind color */
  --color-interactive-primary-hover: var(--color-lime-400); /* @kind color */
  --color-interactive-primary-pressed: var(--color-lime-500); /* @kind color */
  --color-interactive-primary: var(--color-lime-300); /* @kind color */
  --color-lavender-100: rgb(219,222,241); /* @kind color */
  --color-lavender-200: rgb(212,216,240); /* @kind color */
  --color-lavender-500: rgb(140,147,224); /* @kind color */
  --color-lime-300: rgb(237,255,120); /* @kind color */
  --color-lime-400: rgb(220,242,78); /* @kind color */
  --color-lime-500: rgb(222,246,65); /* @kind color */
  --color-neutral-0-alpha-60: rgba(255,255,253,0.6); /* @kind color */
  --color-neutral-0: rgb(255,255,253); /* @kind color */
  --color-neutral-100: rgb(242,242,238); /* @kind color */
  --color-neutral-150: rgb(234,234,228); /* @kind color */
  --color-neutral-200-2: rgb(230,230,222); /* @kind color */
  --color-neutral-200: rgb(230,230,222); /* @kind color */
  --color-neutral-25: rgb(248,248,246); /* @kind color */
  --color-neutral-300: rgb(217,217,207); /* @kind color */
  --color-neutral-50: rgb(244,244,240); /* @kind color */
  --color-overlay-scrim: var(--color-ink-alpha-50); /* @kind color */
  --color-red-100: rgb(254,224,223); /* @kind color */
  --color-red-200: rgb(251,213,211); /* @kind color */
  --color-red-600: rgb(214,69,51); /* @kind color */
  --color-sand-100: rgb(236,226,216); /* @kind color */
  --color-sand-200: rgb(227,214,201); /* @kind color */
  --color-text-disabled: var(--color-ink-alpha-40); /* @kind color */
  --color-text-error: var(--color-red-600); /* @kind color */
  --color-text-on-image-secondary: var(--color-white-alpha-80); /* @kind color */
  --color-text-on-image: var(--color-white-base); /* @kind color */
  --color-text-on-inverse: var(--color-white-base); /* @kind color */
  --color-text-on-primary: var(--color-ink-base-2); /* @kind color */
  --color-text-placeholder: var(--color-ink-alpha-40); /* @kind color */
  --color-text-primary-2: var(--color-ink-base-2); /* @kind color */
  --color-text-primary: var(--color-ink-base); /* @kind color */
  --color-text-secondary: var(--color-ink-alpha-76); /* @kind color */
  --color-text-tertiary-2: var(--color-ink-alpha-64-2); /* @kind color */
  --color-text-tertiary: var(--color-ink-alpha-64); /* @kind color */
  --color-white-alpha-80: rgba(255,255,255,0.8); /* @kind color */
  --color-white-base: rgb(255,255,255); /* @kind color */
  --color-yellow-100: rgb(251,240,208); /* @kind color */
  --color-yellow-200: rgb(250,234,189); /* @kind color */
  --device: "📱 15 Pro Max";
  --font-family: "Helvetica Neue";
  --font-scale-2xl: 24;
  --font-scale-2xs-2: 10;
  --font-scale-2xs: 11;
  --font-scale-3xl: 32;
  --font-scale-base: 14;
  --font-scale-l: 16;
  --font-scale-m-2: 14;
  --font-scale-m: 15;
  --font-scale-s: 12;
  --font-scale-xl: 20;
  --font-scale-xs: 12;
  --font-size-badge: var(--font-scale-2xs-2);
  --font-size-body-l: var(--font-scale-m);
  --font-size-body-m-medium: var(--font-scale-base);
  --font-size-body-m: var(--font-scale-l);
  --font-size-body-s-medium: var(--font-scale-s);
  --font-size-body-s: var(--font-scale-s);
  --font-size-caption-tag: var(--font-scale-2xs);
  --font-size-caption: var(--font-scale-xs);
  --font-size-heading-1: var(--font-scale-3xl);
  --font-size-heading-2: var(--font-scale-xl);
  --font-size-heading-3: var(--font-scale-l);
  --font-size-heading-page: var(--font-scale-2xl);
  --font-size-label-button: var(--font-scale-m-2);
  --font-size-label-section: var(--font-scale-m);
  --font-size-label-segment: var(--font-scale-m-2);
  --font-size-label-tab: var(--font-scale-s);
  --font-size-title-card: var(--font-scale-l);
  --font-weight-medium: "Medium";
  --font-weight-regular: "Regular";
  --grays-white: rgb(255,255,255); /* @kind color */
  --homebar-width: 154;
  --labels-primary: rgb(0,0,0); /* @kind color */
  --neutral-400: rgb(136,136,136); /* @kind color */
  --radius-card-s: var(--radius-scale-lg);
  --radius-card: var(--radius-scale-xl);
  --radius-component-button: var(--radius-scale-full);
  --radius-component-chip: var(--radius-scale-full);
  --radius-component-input: var(--radius-scale-full);
  --radius-modal: var(--radius-scale-3xl);
  --radius-none: var(--radius-scale-none);
  --radius-panel: var(--radius-scale-2xl);
  --radius-pill: var(--radius-scale-full);
  --radius-s: var(--radius-scale-sm);
  --radius-scale-2xl: 24;
  --radius-scale-3xl: 28;
  --radius-scale-4xl: 32;
  --radius-scale-full: 999;
  --radius-scale-lg: 16;
  --radius-scale-md: 12;
  --radius-scale-none: 0;
  --radius-scale-sm: 8;
  --radius-scale-xl: 20;
  --radius-scale-xs: 4;
  --radius-sheet: var(--radius-scale-4xl);
  --radius-thumbnail: var(--radius-scale-md);
  --radius-xs: var(--radius-scale-xs);
  --screen-height: 932;
  --screen-width: 430;
  --size-avatar: 32;
  --size-category-icon: 44;
  --size-control-l: 40;
  --size-control-m: 36;
  --size-control-s: 32;
  --size-control-xl: 44;
  --size-icon-l: 20;
  --size-icon-m: 16;
  --size-icon-s: 14;
  --size-icon-xl: 24;
  --size-screen-height: 900;
  --size-screen-width: 1440;
  --space-0-2: 0;
  --space-0: 0;
  --space-12-2: 12;
  --space-12: 12;
  --space-16-2: 16;
  --space-16: 16;
  --space-2-2: 2;
  --space-20: 20;
  --space-24-2: 24;
  --space-24: 24;
  --space-2: 2;
  --space-32: 32;
  --space-4-2: 4;
  --space-40: 40;
  --space-48-2: 48;
  --space-48: 48;
  --space-4: 4;
  --space-56: 56;
  --space-64: 64;
  --space-72: 72;
  --space-8-2: 8;
  --space-80: 80;
  --space-8: 8;
  --spacing-component-button-gap: var(--space-8);
  --spacing-component-button-padding-x: var(--space-16-2);
  --spacing-component-card-padding: var(--space-12);
  --spacing-component-chip-padding-x: var(--space-12);
  --spacing-component-composer-padding: var(--space-8);
  --spacing-component-dropdown-padding-x: var(--space-16-2);
  --spacing-component-input-padding-x: var(--space-12);
  --spacing-component-modal-footer-padding-y: var(--space-16-2);
  --spacing-component-modal-padding: var(--space-24);
  --spacing-component-panel-padding: var(--space-24);
  --spacing-component-section-gap: var(--space-24);
  --spacing-component-stack-gap: var(--space-16-2);
  --spacing-component-tag-gap: var(--space-4);
  --spacing-component-tag-padding-x: var(--space-12);
  --spacing-component-tag-padding-y: var(--space-4);
  --spacing-gap-2xl: var(--space-32);
  --spacing-gap-2xs: var(--space-4);
  --spacing-gap-3xl: var(--space-40);
  --spacing-gap-3xs-2: var(--space-2-2);
  --spacing-gap-3xs: var(--space-2);
  --spacing-gap-4xl-2: var(--space-48-2);
  --spacing-gap-4xl: var(--space-48);
  --spacing-gap-5xl: var(--space-56);
  --spacing-gap-6xl: var(--space-64);
  --spacing-gap-7xl: var(--space-72);
  --spacing-gap-8xl: var(--space-80);
  --spacing-gap-l: var(--space-20);
  --spacing-gap-m: var(--space-16-2);
  --spacing-gap-none-2: var(--space-0-2);
  --spacing-gap-none: var(--space-0);
  --spacing-gap-s-2: var(--space-12-2);
  --spacing-gap-s: var(--space-12);
  --spacing-gap-xl-2: var(--space-24-2);
  --spacing-gap-xl: var(--space-24);
  --spacing-gap-xs: var(--space-8);
  --spacing-inset-2xl: var(--space-32);
  --spacing-inset-2xs-2: var(--space-4-2);
  --spacing-inset-2xs: var(--space-4);
  --spacing-inset-3xl: var(--space-40);
  --spacing-inset-3xs: var(--space-2);
  --spacing-inset-4xl-2: var(--space-48-2);
  --spacing-inset-4xl: var(--space-48);
  --spacing-inset-5xl: var(--space-56);
  --spacing-inset-6xl: var(--space-64);
  --spacing-inset-7xl: var(--space-72);
  --spacing-inset-8xl: var(--space-80);
  --spacing-inset-l: var(--space-20);
  --spacing-inset-m-2: var(--space-16-2);
  --spacing-inset-m: var(--space-16);
  --spacing-inset-none-2: var(--space-0-2);
  --spacing-inset-none: var(--space-0);
  --spacing-inset-s: var(--space-12);
  --spacing-inset-xl: var(--space-24);
  --spacing-inset-xs-2: var(--space-8-2);
  --spacing-inset-xs: var(--space-8);
  --system-black: rgb(0,0,0); /* @kind color */
  --system-white: rgb(255,255,255); /* @kind color */
  --theme: "🌤️ Light";
  --variant-border: rgb(151,71,255); /* @kind color */
}

:root[data-theme="dark"], .dark {
  --bg-primary-base: var(--system-black); /* @kind color */
  --grays-white: rgb(255,255,255); /* @kind color */
  --grays-white: rgb(255,255,255); /* @kind color */
  --labels-primary: rgb(255,255,255); /* @kind color */
  --labels-primary: rgb(255,255,255); /* @kind color */
  --system-black: rgb(0,0,0); /* @kind color */
  --system-white: rgb(255,255,255); /* @kind color */
  --theme: "🌘 Dark";
}

:root[data-theme="light"], .light {
  --grays-white: rgb(255,255,255); /* @kind color */
  --labels-primary: rgb(0,0,0); /* @kind color */
}

:root[data-mode="15-pro"] {
  --app-lock-screen-flashlight-margin-h: 46;
  --app-lock-screen-flashlight-margin-v: 16;
  --device: "📱 15 Pro";
  --homebar-width: 140;
  --screen-height: 852;
  --screen-width: 393;
}