alouette/src/global.css

A modern, customizable design system built on top of NativeWind v5 with configurable defaults

/* Generated by scripts/build-css.ts. DO NOT EDIT. */
@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/preflight.css' layer(base);
@import 'tailwindcss/utilities.css';
@import 'nativewind/theme';

@theme {
  /* unified alouette type scale — standard Tailwind names, exact pixel values preserved.
     The paired --text-*--line-height modifier is what makes the text-* utility carry a
     default line-height (Tailwind v4 convention). Without it, line-height stays unset.
     Ratios are unitless: web treats them as font-size-relative; on native NativeWind
     multiplies any unitless lineHeight by fontSize, so they behave identically on both platforms.
     Body default is 1.4 (matches the old Tamagui body font); the heading-only display
     sizes (32/40/64px) use the old heading ratios. For headings at shared sizes
     (text-lg/text-xl), add an explicit leading-* class to tighten. */
  --text-xs: 0.75rem;    /* 12px */
  --text-xs--line-height: 1.4;
  --text-sm: 0.875rem;   /* 14px */
  --text-sm--line-height: 1.4;
  --text-base: 1rem;     /* 16px */
  --text-base--line-height: 1.4;
  --text-lg: 1.125rem;   /* 18px */
  --text-lg--line-height: 1.4;
  --text-xl: 1.5rem;     /* 24px */
  --text-xl--line-height: 1.4;
  --text-2xl: 2rem;      /* 32px */
  --text-2xl--line-height: 1.2;
  --text-3xl: 2.5rem;    /* 40px */
  --text-3xl--line-height: 1.1;
  --text-4xl: 3rem;      /* 48px */
  --text-4xl--line-height: 1.1;
  --text-5xl: 4rem;      /* 64px */
  --text-5xl--line-height: 1.1;
  --text-6xl: 5rem;      /* 80px */
  --text-6xl--line-height: 1.1;

  /* radius — alouette scale (16px base) */
  --radius-xs: 0.5rem;
  --radius-sm: 1rem;
  --radius-md: 2rem;
  --radius-lg: 3rem;

  /* box-shadows — multi-layer with inset highlight, matches original
     containers/variants.ts. Names map to Tailwind's shadow-{name} utilities. */
  --shadow-s: inset 0 1px 2px #ffffff40, 0 1px 2px #00000040, 0 2px 4px #00000025;
  --shadow-m: inset 0 1px 2px #ffffff40, 0 2px 4px #00000040, 0 4px 8px #00000025;
  --shadow-l: inset 0 1px 2px #ffffff40, 0 4px 6px #00000040, 0 6px 10px #00000025;
  --shadow-lowered: inset 0 1px 2px #00000040, inset 0 -2px 2px #ffffff15;

  /* spacing — named scale matching the old $N.N token names */
  --spacing-xxs: 4px;
  --spacing-xs: 8px; /* previous $0.5 */
  --spacing-sm: 12px;
  --spacing-m: 16px; /* previous $1.0 */
  --spacing-l: 24px;
  --spacing-xl: 32px; /* previous $2.0 */
  --spacing-xxl: 48px;
  --spacing-3xl: 64px; /* previous $3.0 */
  --spacing-4xl: 128px;

  /* breakpoints — match Breakpoints.ts */
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;

  /* animations — Tailwind v4 names the utility after the --animate-* key
     (animate-slide-in) and NativeWind runs the @keyframes on native via
     Reanimated. Names are generic motions, not component-specific. CSS
     animations are enter-only on their own; pair the exit animation with
     <Presence> (keeps the outgoing child mounted) for an AnimatePresence-style
     swap without an animation library. */
  --animate-slide-in: slide-in 600ms cubic-bezier(0.16, 1, 0.3, 1);
  --animate-slide-out: slide-out 600ms cubic-bezier(0.16, 1, 0.3, 1);
  --animate-collapse-in: collapse-in 800ms ease-out;
  --animate-collapse-out: collapse-out 800ms ease-out;

  /* color tokens — light theme as defaults, enabling bg-*, text-*, border-* utilities.
     Other themes override via :root { @variant <theme> { ... } } below. */
  --color-translucent: #ffffff66;
  --color-disabled-sharp: #616161;
  --color-disabled-muted: #8F8F8F;
  --color-disabled-interactive: #B8B8B8;
  --color-disabled-interactive-muted: #E0E0E0;
  --color-muted: #474747;
  --color-form-border-disabled: #B8B8B8;
  --color-form-placeholder: #616161;
  --color-form-disabled-text: #474747;
  --color-interactive-contained-disabled: #C7C7C7;
  --color-interactive-outlined-disabled: #B8B8B8;
  --color-interactive-accent-contained-bg-disabled: #EBEBEB;
  --color-interactive-accent-outlined-disabled: #B8B8B8;
  --color-screen: #EBEBEB;
  --color-surface: #FAFAFA;
  --color-highlight: #FFFFFF;
  --color-enabled: #C7C7C7;
  --color-highlight-accent: #E0E0E0;
  --color-lowered: #E0E0E0;
  --color-screen-gradient-start: #E0E0E0;
  --color-screen-gradient-middle: #C7C7C7;
  --color-screen-gradient-end: #B8B8B8;
  --color-border-muted: #8F8F8F;
  --color-border-sharp: #616161;
  --color-interactive-contained-pressable: #FFFFFF;
  --color-interactive-contained-hover: #FAFAFA;
  --color-interactive-contained-focus: #FAFAFA;
  --color-interactive-contained-active: #EBEBEB;
  --color-interactive-outlined-pressable: #616161;
  --color-interactive-outlined-hover: #8F8F8F;
  --color-interactive-outlined-focus: #8F8F8F;
  --color-interactive-outlined-active: #8F8F8F;
  --color-interactive-outlined-outline-focus: #8F8F8F;
  --color-interactive-active: #616161;
  --color-interactive-pressable: #474747;
  --color-interactive-hover: #141414;
  --color-sharp: #141414;
  --color-accent: #141414;
  --color-accent-muted: #616161;
  --color-on-accent: #141414;
  --color-on-accent-muted: #616161;
  --color-selection: #47474740;
  --color-interactive-accent-contained-bg: #EBEBEB;
  --color-interactive-accent-contained-bg-hover: #FAFAFA;
  --color-interactive-accent-contained-bg-focus: #FAFAFA;
  --color-interactive-accent-contained-bg-active: #FAFAFA;
}

@layer theme {
  /* font-family tokens — consumers can override these in their own @layer theme :root to swap fonts.
     The base holds WEB values as a fallback list, because the two web targets load different
     families:
       - Expo web (react-native-web): expo-font registers weight-specific families
         ('SoraRegular'/'SoraBold'/'SoraExtraBold', 'ChivoMono*') — 'Sora' is NOT available.
       - Vite Storybook: Google Fonts loads the single 'Sora'/'Chivo Mono' families, weight via
         font-weight.
     Leading with the weight-specific name (matched on Expo web) and falling back to 'Sora'/'ChivoMono'
     (matched on Vite) makes both work from one declaration. Native uses single names (RN has no
     fallbacks) under @variant native (NativeWind's native: variant, from nativewind/theme).

     NB: the base holds the web values and the @variant native block overrides them on native only —
     the native: variant is dropped on web and applied by NativeWind's runtime on native, so the
     platform font split lives there. */
  :root {
    --font-body: 'SoraRegular', 'Sora', ui-sans-serif, system-ui, sans-serif;
    --font-body-bold: 'SoraBold', 'Sora', ui-sans-serif, system-ui, sans-serif;
    --font-body-extrabold: 'SoraExtraBold', 'Sora', ui-sans-serif, system-ui, sans-serif;
    --font-heading: 'SoraRegular', 'Sora', ui-sans-serif, system-ui, sans-serif;
    --font-heading-bold: 'SoraBold', 'Sora', ui-sans-serif, system-ui, sans-serif;
    --font-heading-extrabold: 'SoraExtraBold', 'Sora', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'ChivoMonoRegular', 'ChivoMono', 'Chivo Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --font-mono-bold: 'ChivoMonoBold', 'ChivoMono', 'Chivo Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --font-mono-extrabold: 'ChivoMonoExtraBold', 'ChivoMono', 'Chivo Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    @variant native {
      --font-body: 'SoraRegular';
      --font-body-bold: 'SoraBold';
      --font-body-extrabold: 'SoraExtraBold';
      --font-heading: 'SoraRegular';
      --font-heading-bold: 'SoraBold';
      --font-heading-extrabold: 'SoraExtraBold';
      --font-mono: 'ChivoMonoRegular';
      --font-mono-bold: 'ChivoMonoBold';
      --font-mono-extrabold: 'ChivoMonoExtraBold';
    }
  }

  :where(.light, .light *) {
    --color-translucent: #ffffff66;
    --color-disabled-sharp: #616161;
    --color-disabled-muted: #8F8F8F;
    --color-disabled-interactive: #B8B8B8;
    --color-disabled-interactive-muted: #E0E0E0;
    --color-muted: #474747;
    --color-form-border-disabled: #B8B8B8;
    --color-form-placeholder: #616161;
    --color-form-disabled-text: #474747;
    --color-interactive-contained-disabled: #C7C7C7;
    --color-interactive-outlined-disabled: #B8B8B8;
    --color-interactive-accent-contained-bg-disabled: #EBEBEB;
    --color-interactive-accent-outlined-disabled: #B8B8B8;
    --color-screen: #EBEBEB;
    --color-surface: #FAFAFA;
    --color-highlight: #FFFFFF;
    --color-enabled: #C7C7C7;
    --color-highlight-accent: #E0E0E0;
    --color-lowered: #E0E0E0;
    --color-screen-gradient-start: #E0E0E0;
    --color-screen-gradient-middle: #C7C7C7;
    --color-screen-gradient-end: #B8B8B8;
    --color-border-muted: #8F8F8F;
    --color-border-sharp: #616161;
    --color-interactive-contained-pressable: #FFFFFF;
    --color-interactive-contained-hover: #FAFAFA;
    --color-interactive-contained-focus: #FAFAFA;
    --color-interactive-contained-active: #EBEBEB;
    --color-interactive-outlined-pressable: #616161;
    --color-interactive-outlined-hover: #8F8F8F;
    --color-interactive-outlined-focus: #8F8F8F;
    --color-interactive-outlined-active: #8F8F8F;
    --color-interactive-outlined-outline-focus: #8F8F8F;
    --color-interactive-active: #616161;
    --color-interactive-pressable: #474747;
    --color-interactive-hover: #141414;
    --color-sharp: #141414;
    --color-accent: #141414;
    --color-accent-muted: #616161;
    --color-on-accent: #141414;
    --color-on-accent-muted: #616161;
    --color-selection: #47474740;
    --color-interactive-accent-contained-bg: #EBEBEB;
    --color-interactive-accent-contained-bg-hover: #FAFAFA;
    --color-interactive-accent-contained-bg-focus: #FAFAFA;
    --color-interactive-accent-contained-bg-active: #FAFAFA;
  }

  :where(.dark, .dark *) {
    --color-translucent: #1f1e1e55;
    --color-disabled-sharp: #A8A8A8;
    --color-disabled-muted: #A8A8A8;
    --color-disabled-interactive: #525252;
    --color-disabled-interactive-muted: #333333;
    --color-muted: #C2C2C2;
    --color-form-border-disabled: #525252;
    --color-form-placeholder: #A8A8A8;
    --color-form-disabled-text: #C2C2C2;
    --color-interactive-contained-disabled: #3D3D3D;
    --color-interactive-outlined-disabled: #474747;
    --color-interactive-accent-contained-bg-disabled: #3D3D3D;
    --color-interactive-accent-outlined-disabled: #474747;
    --color-screen: #1F1F1F;
    --color-surface: #292929;
    --color-highlight: #333333;
    --color-enabled: #525252;
    --color-highlight-accent: #333333;
    --color-lowered: #0F0F0F;
    --color-screen-gradient-start: #292929;
    --color-screen-gradient-middle: #1F1F1F;
    --color-screen-gradient-end: #0F0F0F;
    --color-border-muted: #525252;
    --color-border-sharp: #A8A8A8;
    --color-interactive-contained-pressable: #474747;
    --color-interactive-contained-hover: #525252;
    --color-interactive-contained-focus: #525252;
    --color-interactive-contained-active: #525252;
    --color-interactive-outlined-pressable: #525252;
    --color-interactive-outlined-hover: #A8A8A8;
    --color-interactive-outlined-focus: #A8A8A8;
    --color-interactive-outlined-active: #A8A8A8;
    --color-interactive-outlined-outline-focus: #525252;
    --color-interactive-active: #A8A8A8;
    --color-interactive-pressable: #C2C2C2;
    --color-interactive-hover: #F5F5F5;
    --color-sharp: #F5F5F5;
    --color-accent: #F5F5F5;
    --color-accent-muted: #C2C2C2;
    --color-on-accent: #F5F5F5;
    --color-on-accent-muted: #C2C2C2;
    --color-selection: #C2C2C240;
    --color-interactive-accent-contained-bg: #474747;
    --color-interactive-accent-contained-bg-hover: #525252;
    --color-interactive-accent-contained-bg-focus: #525252;
    --color-interactive-accent-contained-bg-active: #525252;
  }

  :where(.light_brand, .light_brand *) {
    --color-screen: #DFF1F6;
    --color-surface: #EFF8FB;
    --color-highlight: #F7FBFD;
    --color-enabled: #99DFF5;
    --color-highlight-accent: #C7EEF9;
    --color-lowered: #C7EEF9;
    --color-screen-gradient-start: #C7EEF9;
    --color-screen-gradient-middle: #99DFF5;
    --color-screen-gradient-end: #7DD7F2;
    --color-border-muted: #23C8FB;
    --color-border-sharp: #037496;
    --color-interactive-contained-pressable: #037496;
    --color-interactive-contained-hover: #049AC8;
    --color-interactive-contained-focus: #049AC8;
    --color-interactive-contained-active: #23C8FB;
    --color-interactive-outlined-pressable: #037496;
    --color-interactive-outlined-hover: #23C8FB;
    --color-interactive-outlined-focus: #23C8FB;
    --color-interactive-outlined-active: #23C8FB;
    --color-interactive-outlined-outline-focus: #23C8FB;
    --color-interactive-active: #037496;
    --color-interactive-pressable: #024D64;
    --color-interactive-hover: #011F28;
    --color-sharp: #011F28;
    --color-accent: #024D64;
    --color-accent-muted: #037496;
    --color-on-accent: #FFFFFF;
    --color-on-accent-muted: #C7EEF9;
    --color-selection: #024D6440;
    --color-interactive-accent-contained-bg: #DFF1F6;
    --color-interactive-accent-contained-bg-hover: #EFF8FB;
    --color-interactive-accent-contained-bg-focus: #EFF8FB;
    --color-interactive-accent-contained-bg-active: #EFF8FB;
  }

  :where(.light_info, .light_info *) {
    --color-screen: #DFF0F6;
    --color-surface: #EFF8FB;
    --color-highlight: #F7FBFD;
    --color-enabled: #99DEF5;
    --color-highlight-accent: #C7EDF9;
    --color-lowered: #C7EDF9;
    --color-screen-gradient-start: #C7EDF9;
    --color-screen-gradient-middle: #99DEF5;
    --color-screen-gradient-end: #7DD5F2;
    --color-border-muted: #23C5FB;
    --color-border-sharp: #037196;
    --color-interactive-contained-pressable: #037196;
    --color-interactive-contained-hover: #0497C8;
    --color-interactive-contained-focus: #0497C8;
    --color-interactive-contained-active: #23C5FB;
    --color-interactive-outlined-pressable: #037196;
    --color-interactive-outlined-hover: #23C5FB;
    --color-interactive-outlined-focus: #23C5FB;
    --color-interactive-outlined-active: #23C5FB;
    --color-interactive-outlined-outline-focus: #23C5FB;
    --color-interactive-active: #037196;
    --color-interactive-pressable: #024B64;
    --color-interactive-hover: #011E28;
    --color-sharp: #011E28;
    --color-accent: #024B64;
    --color-accent-muted: #037196;
    --color-on-accent: #FFFFFF;
    --color-on-accent-muted: #C7EDF9;
    --color-selection: #024B6440;
    --color-interactive-accent-contained-bg: #DFF0F6;
    --color-interactive-accent-contained-bg-hover: #EFF8FB;
    --color-interactive-accent-contained-bg-focus: #EFF8FB;
    --color-interactive-accent-contained-bg-active: #EFF8FB;
  }

  :where(.light_success, .light_success *) {
    --color-screen: #DFF6DF;
    --color-surface: #EFFBEF;
    --color-highlight: #F7FDF7;
    --color-enabled: #91F391;
    --color-highlight-accent: #BFF8BF;
    --color-lowered: #BFF8BF;
    --color-screen-gradient-start: #BFF8BF;
    --color-screen-gradient-middle: #91F391;
    --color-screen-gradient-end: #75F075;
    --color-border-muted: #19FA19;
    --color-border-sharp: #027802;
    --color-interactive-contained-pressable: #027802;
    --color-interactive-contained-hover: #03AA03;
    --color-interactive-contained-focus: #03AA03;
    --color-interactive-contained-active: #19FA19;
    --color-interactive-outlined-pressable: #027802;
    --color-interactive-outlined-hover: #19FA19;
    --color-interactive-outlined-focus: #19FA19;
    --color-interactive-outlined-active: #19FA19;
    --color-interactive-outlined-outline-focus: #19FA19;
    --color-interactive-active: #027802;
    --color-interactive-pressable: #014601;
    --color-interactive-hover: #012801;
    --color-sharp: #012801;
    --color-accent: #014601;
    --color-accent-muted: #027802;
    --color-on-accent: #FFFFFF;
    --color-on-accent-muted: #BFF8BF;
    --color-selection: #01460140;
    --color-interactive-accent-contained-bg: #DFF6DF;
    --color-interactive-accent-contained-bg-hover: #EFFBEF;
    --color-interactive-accent-contained-bg-focus: #EFFBEF;
    --color-interactive-accent-contained-bg-active: #EFFBEF;
  }

  :where(.light_warning, .light_warning *) {
    --color-screen: #F6EEDF;
    --color-surface: #FBF7EF;
    --color-highlight: #FDFBF7;
    --color-enabled: #F3D291;
    --color-highlight-accent: #F8E5BF;
    --color-lowered: #F8E5BF;
    --color-screen-gradient-start: #F8E5BF;
    --color-screen-gradient-middle: #F3D291;
    --color-screen-gradient-end: #F0C775;
    --color-border-muted: #FAAF19;
    --color-border-sharp: #8C5E03;
    --color-interactive-contained-pressable: #8C5E03;
    --color-interactive-contained-hover: #BE8004;
    --color-interactive-contained-focus: #BE8004;
    --color-interactive-contained-active: #FAAF19;
    --color-interactive-outlined-pressable: #8C5E03;
    --color-interactive-outlined-hover: #FAAF19;
    --color-interactive-outlined-focus: #FAAF19;
    --color-interactive-outlined-active: #FAAF19;
    --color-interactive-outlined-outline-focus: #FAAF19;
    --color-interactive-active: #8C5E03;
    --color-interactive-pressable: #5A3D02;
    --color-interactive-hover: #281B01;
    --color-sharp: #281B01;
    --color-accent: #5A3D02;
    --color-accent-muted: #8C5E03;
    --color-on-accent: #FFFFFF;
    --color-on-accent-muted: #F8E5BF;
    --color-selection: #5A3D0240;
    --color-interactive-accent-contained-bg: #F6EEDF;
    --color-interactive-accent-contained-bg-hover: #FBF7EF;
    --color-interactive-accent-contained-bg-focus: #FBF7EF;
    --color-interactive-accent-contained-bg-active: #FBF7EF;
  }

  :where(.light_danger, .light_danger *) {
    --color-screen: #F6E0DF;
    --color-surface: #FBEFEF;
    --color-highlight: #FDF7F7;
    --color-enabled: #F7A4A1;
    --color-highlight-accent: #FBD2D0;
    --color-lowered: #FBD2D0;
    --color-screen-gradient-start: #FBD2D0;
    --color-screen-gradient-middle: #F7A4A1;
    --color-screen-gradient-end: #F48985;
    --color-border-muted: #FB342D;
    --color-border-sharp: #A00803;
    --color-interactive-contained-pressable: #A00803;
    --color-interactive-contained-hover: #D20B04;
    --color-interactive-contained-focus: #D20B04;
    --color-interactive-contained-active: #FB342D;
    --color-interactive-outlined-pressable: #A00803;
    --color-interactive-outlined-hover: #FB342D;
    --color-interactive-outlined-focus: #FB342D;
    --color-interactive-outlined-active: #FB342D;
    --color-interactive-outlined-outline-focus: #FB342D;
    --color-interactive-active: #A00803;
    --color-interactive-pressable: #6E0602;
    --color-interactive-hover: #280201;
    --color-sharp: #280201;
    --color-accent: #6E0602;
    --color-accent-muted: #A00803;
    --color-on-accent: #FFFFFF;
    --color-on-accent-muted: #FBD2D0;
    --color-selection: #6E060240;
    --color-interactive-accent-contained-bg: #F6E0DF;
    --color-interactive-accent-contained-bg-hover: #FBEFEF;
    --color-interactive-accent-contained-bg-focus: #FBEFEF;
    --color-interactive-accent-contained-bg-active: #FBEFEF;
  }

  :where(.dark_brand, .dark_brand *) {
    --color-screen: #0D2830;
    --color-surface: #123540;
    --color-highlight: #104E60;
    --color-enabled: #1E94B8;
    --color-highlight-accent: #104E60;
    --color-lowered: #071418;
    --color-screen-gradient-start: #123540;
    --color-screen-gradient-middle: #0D2830;
    --color-screen-gradient-end: #071418;
    --color-border-muted: #1E94B8;
    --color-border-sharp: #5CD1F5;
    --color-interactive-contained-pressable: #156A84;
    --color-interactive-contained-hover: #1E94B8;
    --color-interactive-contained-focus: #1E94B8;
    --color-interactive-contained-active: #1E94B8;
    --color-interactive-outlined-pressable: #1E94B8;
    --color-interactive-outlined-hover: #5CD1F5;
    --color-interactive-outlined-focus: #5CD1F5;
    --color-interactive-outlined-active: #5CD1F5;
    --color-interactive-outlined-outline-focus: #1E94B8;
    --color-interactive-active: #5CD1F5;
    --color-interactive-pressable: #8CDFF8;
    --color-interactive-hover: #D9F4FD;
    --color-sharp: #D9F4FD;
    --color-accent: #8CDFF8;
    --color-accent-muted: #8CDFF8;
    --color-on-accent: #F5F5F5;
    --color-on-accent-muted: #8CDFF8;
    --color-selection: #8CDFF840;
    --color-interactive-accent-contained-bg: #156A84;
    --color-interactive-accent-contained-bg-hover: #1E94B8;
    --color-interactive-accent-contained-bg-focus: #1E94B8;
    --color-interactive-accent-contained-bg-active: #1E94B8;
  }

  :where(.dark_info, .dark_info *) {
    --color-screen: #0D2730;
    --color-surface: #123440;
    --color-highlight: #104C60;
    --color-enabled: #1E92B8;
    --color-highlight-accent: #104C60;
    --color-lowered: #071418;
    --color-screen-gradient-start: #123440;
    --color-screen-gradient-middle: #0D2730;
    --color-screen-gradient-end: #071418;
    --color-border-muted: #1E92B8;
    --color-border-sharp: #5CCEF5;
    --color-interactive-contained-pressable: #156884;
    --color-interactive-contained-hover: #1E92B8;
    --color-interactive-contained-focus: #1E92B8;
    --color-interactive-contained-active: #1E92B8;
    --color-interactive-outlined-pressable: #1E92B8;
    --color-interactive-outlined-hover: #5CCEF5;
    --color-interactive-outlined-focus: #5CCEF5;
    --color-interactive-outlined-active: #5CCEF5;
    --color-interactive-outlined-outline-focus: #1E92B8;
    --color-interactive-active: #5CCEF5;
    --color-interactive-pressable: #8CDDF8;
    --color-interactive-hover: #D9F4FD;
    --color-sharp: #D9F4FD;
    --color-accent: #8CDDF8;
    --color-accent-muted: #8CDDF8;
    --color-on-accent: #F5F5F5;
    --color-on-accent-muted: #8CDDF8;
    --color-selection: #8CDDF840;
    --color-interactive-accent-contained-bg: #156884;
    --color-interactive-accent-contained-bg-hover: #1E92B8;
    --color-interactive-accent-contained-bg-focus: #1E92B8;
    --color-interactive-accent-contained-bg-active: #1E92B8;
  }

  :where(.dark_success, .dark_success *) {
    --color-screen: #0D300D;
    --color-surface: #124012;
    --color-highlight: #0F570F;
    --color-enabled: #1FAD1F;
    --color-highlight-accent: #0F570F;
    --color-lowered: #071807;
    --color-screen-gradient-start: #124012;
    --color-screen-gradient-middle: #0D300D;
    --color-screen-gradient-end: #071807;
    --color-border-muted: #1FAD1F;
    --color-border-sharp: #52F452;
    --color-interactive-contained-pressable: #157915;
    --color-interactive-contained-hover: #1FAD1F;
    --color-interactive-contained-focus: #1FAD1F;
    --color-interactive-contained-active: #1FAD1F;
    --color-interactive-outlined-pressable: #1FAD1F;
    --color-interactive-outlined-hover: #52F452;
    --color-interactive-outlined-focus: #52F452;
    --color-interactive-outlined-active: #52F452;
    --color-interactive-outlined-outline-focus: #1FAD1F;
    --color-interactive-active: #52F452;
    --color-interactive-pressable: #82F782;
    --color-interactive-hover: #D9FDD9;
    --color-sharp: #D9FDD9;
    --color-accent: #82F782;
    --color-accent-muted: #82F782;
    --color-on-accent: #F5F5F5;
    --color-on-accent-muted: #82F782;
    --color-selection: #82F78240;
    --color-interactive-accent-contained-bg: #157915;
    --color-interactive-accent-contained-bg-hover: #1FAD1F;
    --color-interactive-accent-contained-bg-focus: #1FAD1F;
    --color-interactive-accent-contained-bg-active: #1FAD1F;
  }

  :where(.dark_warning, .dark_warning *) {
    --color-screen: #30240D;
    --color-surface: #403012;
    --color-highlight: #583F0E;
    --color-enabled: #AF7E1D;
    --color-highlight-accent: #583F0E;
    --color-lowered: #181207;
    --color-screen-gradient-start: #403012;
    --color-screen-gradient-middle: #30240D;
    --color-screen-gradient-end: #181207;
    --color-border-muted: #AF7E1D;
    --color-border-sharp: #F4BE52;
    --color-interactive-contained-pressable: #7B5914;
    --color-interactive-contained-hover: #AF7E1D;
    --color-interactive-contained-focus: #AF7E1D;
    --color-interactive-contained-active: #AF7E1D;
    --color-interactive-outlined-pressable: #AF7E1D;
    --color-interactive-outlined-hover: #F4BE52;
    --color-interactive-outlined-focus: #F4BE52;
    --color-interactive-outlined-active: #F4BE52;
    --color-interactive-outlined-outline-focus: #AF7E1D;
    --color-interactive-active: #F4BE52;
    --color-interactive-pressable: #F7D082;
    --color-interactive-hover: #FDF1D9;
    --color-sharp: #FDF1D9;
    --color-accent: #F7D082;
    --color-accent-muted: #F7D082;
    --color-on-accent: #F5F5F5;
    --color-on-accent-muted: #F7D082;
    --color-selection: #F7D08240;
    --color-interactive-accent-contained-bg: #7B5914;
    --color-interactive-accent-contained-bg-hover: #AF7E1D;
    --color-interactive-accent-contained-bg-focus: #AF7E1D;
    --color-interactive-accent-contained-bg-active: #AF7E1D;
  }

  :where(.dark_danger, .dark_danger *) {
    --color-screen: #300F0D;
    --color-surface: #401312;
    --color-highlight: #691411;
    --color-enabled: #C1251F;
    --color-highlight-accent: #691411;
    --color-lowered: #180707;
    --color-screen-gradient-start: #401312;
    --color-screen-gradient-middle: #300F0D;
    --color-screen-gradient-end: #180707;
    --color-border-muted: #C1251F;
    --color-border-sharp: #F56A66;
    --color-interactive-contained-pressable: #8C1B17;
    --color-interactive-contained-hover: #C1251F;
    --color-interactive-contained-focus: #C1251F;
    --color-interactive-contained-active: #C1251F;
    --color-interactive-outlined-pressable: #C1251F;
    --color-interactive-outlined-hover: #F56A66;
    --color-interactive-outlined-focus: #F56A66;
    --color-interactive-outlined-active: #F56A66;
    --color-interactive-outlined-outline-focus: #C1251F;
    --color-interactive-active: #F56A66;
    --color-interactive-pressable: #F89996;
    --color-interactive-hover: #FDDAD9;
    --color-sharp: #FDDAD9;
    --color-accent: #F89996;
    --color-accent-muted: #F89996;
    --color-on-accent: #F5F5F5;
    --color-on-accent-muted: #F89996;
    --color-selection: #F8999640;
    --color-interactive-accent-contained-bg: #8C1B17;
    --color-interactive-accent-contained-bg-hover: #C1251F;
    --color-interactive-accent-contained-bg-focus: #C1251F;
    --color-interactive-accent-contained-bg-active: #C1251F;
  }
}

@layer base {
  /* hotpink default catches any text missing Text component use */
  body { color: hotpink; }

  /* let height/width keyframes interpolate to/from auto (collapse-in/out) on web */
  :root { interpolate-size: allow-keywords; }

  body, #root {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
}

/* keyframes referenced by the --animate-* theme tokens above. */
@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateX(-100%) rotateY(-90deg);
  }
  to {
    opacity: 1;
    transform: translateX(0) rotateY(0deg);
  }
}

@keyframes slide-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

@keyframes collapse-in {
  from {
    opacity: 0;
    height: 0;
  }
  to {
    opacity: 1;
    height: auto;
  }
}

@keyframes collapse-out {
  from {
    opacity: 1;
    height: auto;
  }
  to {
    opacity: 0;
    height: 0;
  }
}


/* named transition durations — one per animationDurationsMs entry so transition
   classNames reference the same source of truth as the JS export (native drives
   the same motion via Reanimated withTiming(animationDurationsMs.*)). */
@utility duration-slide { transition-duration: 600ms; }
@utility duration-collapse { transition-duration: 800ms; }
@utility duration-progress { transition-duration: 600ms; }
@utility duration-fade { transition-duration: 300ms; }
@utility duration-fast { transition-duration: 200ms; }

/* font-family + weight utilities — family×weight combinations; use with standard text-* size utilities.
   font-synthesis: none — on Expo web the weight-specific family ('SoraBold') is a single registered
   face, so the font-weight below must NOT trigger algorithmic (faux) bolding of already-bold glyphs.
   On Vite web 'Sora' is a real variable font, so the font-weight selects the genuine weight. */
@utility font-body            { font-family: var(--font-body);            font-weight: 400; font-synthesis: none; }
@utility font-body-bold       { font-family: var(--font-body-bold);       font-weight: 700; font-synthesis: none; }
@utility font-body-extrabold  { font-family: var(--font-body-extrabold);  font-weight: 800; font-synthesis: none; }
@utility font-heading           { font-family: var(--font-heading);           font-weight: 400; font-synthesis: none; }
@utility font-heading-bold      { font-family: var(--font-heading-bold);      font-weight: 700; font-synthesis: none; }
@utility font-heading-extrabold { font-family: var(--font-heading-extrabold); font-weight: 800; font-synthesis: none; }
@utility font-mono            { font-family: var(--font-mono);            font-weight: 400; font-synthesis: none; }
@utility font-mono-bold       { font-family: var(--font-mono-bold);       font-weight: 700; font-synthesis: none; }
@utility font-mono-extrabold  { font-family: var(--font-mono-extrabold);  font-weight: 800; font-synthesis: none; }

/* tripwire — standalone Tailwind font-weight utilities are NOT valid here: weight
   must be baked into the font-* family utility (font-body-bold, etc.) so it works on
   native. Override them to weight 100 + crunched letter-spacing so any accidental use
   renders visibly thin and cramped on web and is easy to spot. (native ignores both
   font-weight and letterSpacing here, so this only affects web.) */
@utility font-thin       { font-weight: 100; letter-spacing: -0.1em; }
@utility font-extralight { font-weight: 100; letter-spacing: -0.1em; }
@utility font-light      { font-weight: 100; letter-spacing: -0.1em; }
@utility font-normal     { font-weight: 100; letter-spacing: -0.1em; }
@utility font-medium     { font-weight: 100; letter-spacing: -0.1em; }
@utility font-semibold   { font-weight: 100; letter-spacing: -0.1em; }
@utility font-bold       { font-weight: 100; letter-spacing: -0.1em; }
@utility font-extrabold  { font-weight: 100; letter-spacing: -0.1em; }
@utility font-black      { font-weight: 100; letter-spacing: -0.1em; }

/* flex-center — center children on both axes. Replaces the old Box `center`
   variant. Named flex-center (not `center`) to avoid clashing with any future
   text-align / place-* shorthand. */
@utility flex-center {
  align-items: center;
  justify-content: center;
}