/* 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 (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 { ... } } 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; }