dawn-ui-react 1.0.0-alpha

package/dist/styles.css

@@ -0,0 +1,779 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Manrope:wght@200..800&display=swap');
+@import url('https://utopia.fyi/type/calculator?c=360,12,1.2,1240,16,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12');
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@theme static {
+  --color-*: initial;
+  --color-brand-default: var(--dawn-brand-default);
+  --color-brand-muted: var(--dawn-brand-muted);
+  --color-brand-subtle: var(--dawn-brand-subtle);
+  --color-brand-on-default: var(--dawn-brand-on-default);
+  --color-brand-container: var(--dawn-brand-container);
+  --color-brand-container-high: var(--dawn-brand-container-high);
+  --color-brand-on-container: var(--dawn-brand-on-container);
+  --color-brand-on-container-muted: var(--dawn-brand-on-container-muted);
+  --color-brand-border: var(--dawn-brand-border);
+  --color-brand-border-strong: var(--dawn-brand-border-strong);
+  --color-brand-shadow: var(--dawn-brand-shadow);
+
+  --color-accent-default: var(--dawn-accent-default);
+  --color-accent-muted: var(--dawn-accent-muted);
+  --color-accent-subtle: var(--dawn-accent-subtle);
+  --color-accent-on-default: var(--dawn-accent-on-default);
+  --color-accent-container: var(--dawn-accent-container);
+  --color-accent-container-high: var(--dawn-accent-container-high);
+  --color-accent-on-container: var(--dawn-accent-on-container);
+  --color-accent-on-container-muted: var(--dawn-accent-on-container-muted);
+  --color-accent-border: var(--dawn-accent-border);
+  --color-accent-border-strong: var(--dawn-accent-border-strong);
+  --color-accent-shadow: var(--dawn-accent-shadow);
+
+  --color-neutral-default: var(--dawn-neutral-default);
+  --color-neutral-muted: var(--dawn-neutral-muted);
+  --color-neutral-subtle: var(--dawn-neutral-subtle);
+  --color-neutral-on-default: var(--dawn-neutral-on-default);
+  --color-neutral-container: var(--dawn-neutral-container);
+  --color-neutral-container-high: var(--dawn-neutral-container-high);
+  --color-neutral-on-container: var(--dawn-neutral-on-container);
+  --color-neutral-on-container-muted: var(--dawn-neutral-on-container-muted);
+  --color-neutral-border: var(--dawn-neutral-border);
+  --color-neutral-border-strong: var(--dawn-neutral-border-strong);
+  --color-neutral-shadow: var(--dawn-neutral-shadow);
+
+  --color-error-default: var(--dawn-error-default);
+  --color-error-muted: var(--dawn-error-muted);
+  --color-error-subtle: var(--dawn-error-subtle);
+  --color-error-on-default: var(--dawn-error-on-default);
+  --color-error-container: var(--dawn-error-container);
+  --color-error-container-high: var(--dawn-error-container-high);
+  --color-error-on-container: var(--dawn-error-on-container);
+  --color-error-on-container-muted: var(--dawn-error-on-container-muted);
+  --color-error-border: var(--dawn-error-border);
+  --color-error-border-strong: var(--dawn-error-border-strong);
+  --color-error-shadow: var(--dawn-error-shadow);
+
+  --color-info-default: var(--dawn-info-default);
+  --color-info-muted: var(--dawn-info-muted);
+  --color-info-subtle: var(--dawn-info-subtle);
+  --color-info-on-default: var(--dawn-info-on-default);
+  --color-info-container: var(--dawn-info-container);
+  --color-info-container-high: var(--dawn-info-container-high);
+  --color-info-on-container: var(--dawn-info-on-container);
+  --color-info-on-container-muted: var(--dawn-info-on-container-muted);
+  --color-info-border: var(--dawn-info-border);
+  --color-info-border-strong: var(--dawn-info-border-strong);
+  --color-info-shadow: var(--dawn-info-shadow);
+
+  --color-success-default: var(--dawn-success-default);
+  --color-success-muted: var(--dawn-success-muted);
+  --color-success-subtle: var(--dawn-success-subtle);
+  --color-success-on-default: var(--dawn-success-on-default);
+  --color-success-container: var(--dawn-success-container);
+  --color-success-container-high: var(--dawn-success-container-high);
+  --color-success-on-container: var(--dawn-success-on-container);
+  --color-success-on-container-muted: var(--dawn-success-on-container-muted);
+  --color-success-border: var(--dawn-success-border);
+  --color-success-border-strong: var(--dawn-success-border-strong);
+  --color-success-shadow: var(--dawn-success-shadow);
+
+  --color-warning-default: var(--dawn-warning-default);
+  --color-warning-muted: var(--dawn-warning-muted);
+  --color-warning-subtle: var(--dawn-warning-subtle);
+  --color-warning-on-default: var(--dawn-warning-on-default);
+  --color-warning-container: var(--dawn-warning-container);
+  --color-warning-container-high: var(--dawn-warning-container-high);
+  --color-warning-on-container: var(--dawn-warning-on-container);
+  --color-warning-on-container-muted: var(--dawn-warning-on-container-muted);
+  --color-warning-border: var(--dawn-warning-border);
+  --color-warning-border-strong: var(--dawn-warning-border-strong);
+  --color-warning-shadow: var(--dawn-warning-shadow);
+
+  --color-surface-background: var(--dawn-surface-background);
+  --color-surface: var(--dawn-surface);
+  --color-surface-2: var(--dawn-surface-2);
+  --color-surface-3: var(--dawn-surface-3);
+  --color-surface-low: var(--dawn-surface-low);
+  --color-on-surface: var(--dawn-on-surface);
+  --color-on-surface-variant: var(--dawn-on-surface-variant);
+  --color-on-surface-muted: var(--dawn-on-surface-muted);
+  --color-on-surface-disabled: var(--dawn-on-surface-disabled);
+  --color-border: var(--dawn-border);
+  --color-border-strong: var(--dawn-border-strong);
+  --color-surface-inverse: var(--dawn-surface-inverse);
+  --color-on-surface-inverse: var(--dawn-on-surface-inverse);
+  --color-surface-focus-ring: var(--dawn-surface-focus-ring);
+  --color-scrim: var(--dawn-scrim);
+  --color-shadow: var(--dawn-shadow);
+  --color-shadow-strong: var(--dawn-shadow-strong);
+
+  --shadow-*: initial;
+  --shadow-2xs: var(--dawn-shadow-2xs);
+  --shadow-xs: var(--dawn-shadow-xs);
+  --shadow-sm: var(--dawn-shadow-sm);
+  --shadow-md: var(--dawn-shadow-md);
+  --shadow-lg: var(--dawn-shadow-lg);
+  --shadow-xl: var(--dawn-shadow-xl);
+  --shadow-2xl: var(--dawn-shadow-2xl);
+
+  --inset-shadow-*: initial;
+  --inset-shadow-2xs: var(--dawn-inset-shadow-2xs);
+  --inset-shadow-xs: var(--dawn-inset-shadow-xs);
+  --inset-shadow-sm: var(--dawn-inset-shadow-sm);
+  --inset-shadow-md: var(--dawn-inset-shadow-md);
+  --inset-shadow-lg: var(--dawn-inset-shadow-lg);
+  --inset-shadow-xl: var(--dawn-inset-shadow-xl);
+  --inset-shadow-2xl: var(--dawn-inset-shadow-2xl);
+
+  --blur-*: initial;
+  --blur-2xs: var(--dawn-blur-2xs);
+  --blur-xs: var(--dawn-blur-xs);
+  --blur-sm: var(--dawn-blur-sm);
+  --blur-md: var(--dawn-blur-md);
+  --blur-lg: var(--dawn-blur-lg);
+  --blur-xl: var(--dawn-blur-xl);
+  --blur-2xl: var(--dawn-blur-2xl);
+
+  --text-*: initial;
+  --text-xs: var(--dawn-text-xs);
+  --text-sm: var(--dawn-text-sm);
+  --text-base: var(--dawn-text-base);
+  --text-lg: var(--dawn-text-lg);
+  --text-xl: var(--dawn-text-xl);
+  --text-2xl: var(--dawn-text-2xl);
+  --text-3xl: var(--dawn-text-3xl);
+  --text-4xl: var(--dawn-text-4xl);
+
+  --spacing-*: initial;
+  --spacing-0: var(--dawn-spacing-0);
+  --spacing-3xs: var(--dawn-spacing-3xs);
+  --spacing-2xs: var(--dawn-spacing-2xs);
+  --spacing-xs: var(--dawn-spacing-xs);
+  --spacing-sm: var(--dawn-spacing-sm);
+  --spacing-md: var(--dawn-spacing-md);
+  --spacing-lg: var(--dawn-spacing-lg);
+  --spacing-xl: var(--dawn-spacing-xl);
+  --spacing-2xl: var(--dawn-spacing-2xl);
+  --spacing-3xl: var(--dawn-spacing-3xl);
+  --spacing-3xs-2xs: var(--dawn-spacing-3xs-2xs);
+  --spacing-2xs-xs: var(--dawn-spacing-2xs-xs);
+  --spacing-xs-sm: var(--dawn-spacing-xs-sm);
+  --spacing-sm-md: var(--dawn-spacing-sm-md);
+  --spacing-md-lg: var(--dawn-spacing-md-lg);
+  --spacing-lg-xl: var(--dawn-spacing-lg-xl);
+  --spacing-xl-2xl: var(--dawn-spacing-xl-2xl);
+  --spacing-2xl-3xl: var(--dawn-spacing-2xl-3xl);
+  --spacing-sm-lg: var(--dawn-spacing-sm-lg);
+
+  --font-*: initial;
+  --font-heading: var(--dawn-font-heading);
+  --font-body: var(--dawn-font-body);
+
+  --border-*: initial;
+  --border-width-2xs: var(--dawn-border-width-2xs);
+  --border-width-xs: var(--dawn-border-width-xs);
+  --border-width-sm: var(--dawn-border-width-sm);
+  --border-width-md: var(--dawn-border-width-md);
+  --border-width-lg: var(--dawn-border-width-lg);
+  --border-width-xl: var(--dawn-border-width-xl);
+  --border-width-2xl: var(--dawn-border-width-2xl);
+
+  --outline-*: initial;
+  --outline-width-2xs: var(--dawn-outline-width-2xs);
+  --outline-width-xs: var(--dawn-outline-width-xs);
+  --outline-width-sm: var(--dawn-outline-width-sm);
+  --outline-width-md: var(--dawn-outline-width-md);
+  --outline-width-lg: var(--dawn-outline-width-lg);
+  --outline-width-xl: var(--dawn-outline-width-xl);
+  --outline-width-2xl: var(--dawn-outline-width-2xl);
+
+  --radius-*: initial;
+  --radius-xs: var(--dawn-radius-xs);
+  --radius-sm: var(--dawn-radius-sm);
+  --radius-md: var(--dawn-radius-md);
+  --radius-lg: var(--dawn-radius-lg);
+  --radius-xl: var(--dawn-radius-xl);
+  --radius-2xl: var(--dawn-radius-2xl);
+  --radius-3xl: var(--dawn-radius-3xl);
+  --radius-4xl: var(--dawn-radius-4xl);
+  --radius-full: var(--dawn-radius-full);
+
+  --ease-out-bounce: cubic-bezier(0.22, 1.61, 0.57, 1);
+}
+
+:root {
+  color-scheme: light dark;
+
+  --white: #ffffffff;
+  --black: #000000ff;
+  --amber-50: #fff6ebff;
+  --amber-100: #fee4c7ff;
+  --amber-200: #fdc88aff;
+  --amber-300: #fcab4dff;
+  --amber-400: #fb9724ff;
+  --amber-500: #f5880bff;
+  --amber-600: #d97706ff;
+  --amber-700: #b46509ff;
+  --amber-800: #92550eff;
+  --amber-900: #78470fff;
+  --amber-950: #452603ff;
+  --blue-50: #eff7ffff;
+  --blue-100: #dfefffff;
+  --blue-200: #b7e0ffff;
+  --blue-300: #78c8ffff;
+  --blue-400: #30acffff;
+  --blue-500: #0590f0ff;
+  --blue-600: #0073cfff;
+  --blue-700: #005ba7ff;
+  --blue-800: #024e8aff;
+  --blue-900: #084172ff;
+  --blue-950: #05294cff;
+  --cyan-50: #ecfcffff;
+  --cyan-100: #cff7feff;
+  --cyan-200: #a5effcff;
+  --cyan-300: #67e4f9ff;
+  --cyan-400: #22d0eeff;
+  --cyan-500: #06b6d4ff;
+  --cyan-600: #0899b2ff;
+  --cyan-700: #0e7d90ff;
+  --cyan-800: #156775ff;
+  --cyan-900: #165863ff;
+  --cyan-950: #083b44ff;
+  --emerald-50: #ecfdf7ff;
+  --emerald-100: #d1faecff;
+  --emerald-200: #a7f3daff;
+  --emerald-300: #6ee7bfff;
+  --emerald-400: #34d39eff;
+  --emerald-500: #10b981ff;
+  --emerald-600: #059666ff;
+  --emerald-700: #047852ff;
+  --emerald-800: #065f42ff;
+  --emerald-900: #064e36ff;
+  --emerald-950: #022c1eff;
+  --fuchsia-50: #fef4ffff;
+  --fuchsia-100: #fce8ffff;
+  --fuchsia-200: #f9d0feff;
+  --fuchsia-300: #f3abfcff;
+  --fuchsia-400: #eb79f9ff;
+  --fuchsia-500: #dc46efff;
+  --fuchsia-600: #c026d3ff;
+  --fuchsia-700: #9f1cafff;
+  --fuchsia-800: #82198fff;
+  --fuchsia-900: #6b1a75ff;
+  --fuchsia-950: #46044eff;
+  --green-50: #f0fdf5ff;
+  --green-100: #dcfce8ff;
+  --green-200: #bbf7d1ff;
+  --green-300: #86efadff;
+  --green-400: #4ade80ff;
+  --green-500: #22c55eff;
+  --green-600: #16a34aff;
+  --green-700: #15803cff;
+  --green-800: #166533ff;
+  --green-900: #14532bff;
+  --green-950: #052e14ff;
+  --indigo-50: #eeeeffff;
+  --indigo-100: #e0e1ffff;
+  --indigo-200: #c7c8feff;
+  --indigo-300: #a5a7fcff;
+  --indigo-400: #8184f8ff;
+  --indigo-500: #6366f1ff;
+  --indigo-600: #4649e5ff;
+  --indigo-700: #383bcaff;
+  --indigo-800: #3032a3ff;
+  --indigo-900: #2e3081ff;
+  --indigo-950: #1b1c4bff;
+  --lime-50: #f0fdf6ff;
+  --lime-100: #ddfbebff;
+  --lime-200: #bdf5d9ff;
+  --lime-300: #8aebbaff;
+  --lime-400: #4fd994ff;
+  --lime-500: #27c074ff;
+  --lime-600: #1ba05eff;
+  --lime-700: #197c4bff;
+  --lime-800: #19623fff;
+  --lime-900: #165135ff;
+  --lime-950: #062d1bff;
+  --neutral-50: #fafafaff;
+  --neutral-100: #f5f5f5ff;
+  --neutral-200: #e6e6e6ff;
+  --neutral-300: #d3d3d3ff;
+  --neutral-400: #a3a3a3ff;
+  --neutral-500: #737373ff;
+  --neutral-600: #535353ff;
+  --neutral-700: #404040ff;
+  --neutral-800: #272727ff;
+  --neutral-900: #1a1a1aff;
+  --neutral-950: #0b0b0bff;
+  --orange-50: #fff3edff;
+  --orange-100: #ffe3d5ff;
+  --orange-200: #fec7aaff;
+  --orange-300: #fda374ff;
+  --orange-400: #fb7d3cff;
+  --orange-500: #f96416ff;
+  --orange-600: #ea580cff;
+  --orange-700: #c24a0cff;
+  --orange-800: #9a4112ff;
+  --orange-900: #7c3612ff;
+  --orange-950: #431c07ff;
+  --pink-50: #fdf2f7ff;
+  --pink-100: #fce7f1ff;
+  --pink-200: #fbcfe5ff;
+  --pink-300: #f9a8d0ff;
+  --pink-400: #f472b2ff;
+  --pink-500: #ec4899ff;
+  --pink-600: #db2780ff;
+  --pink-700: #be186aff;
+  --pink-800: #9d1759ff;
+  --pink-900: #83184dff;
+  --pink-950: #50072bff;
+  --purple-50: #faf5ffff;
+  --purple-100: #f4e8ffff;
+  --purple-200: #ebd5ffff;
+  --purple-300: #dbb4feff;
+  --purple-400: #c384fcff;
+  --purple-500: #aa55f7ff;
+  --purple-600: #9333eaff;
+  --purple-700: #7c22ceff;
+  --purple-800: #6821a8ff;
+  --purple-900: #541c87ff;
+  --purple-950: #380764ff;
+  --red-50: #fef2f2ff;
+  --red-100: #fee2e2ff;
+  --red-200: #fecacaff;
+  --red-300: #fca5a5ff;
+  --red-400: #f87171ff;
+  --red-500: #ef4444ff;
+  --red-600: #dc2626ff;
+  --red-700: #b91c1cff;
+  --red-800: #991b1bff;
+  --red-900: #7f1d1dff;
+  --red-950: #450a0aff;
+  --rose-50: #fff1f4ff;
+  --rose-100: #ffe4eaff;
+  --rose-200: #fecdd8ff;
+  --rose-300: #fda4b8ff;
+  --rose-400: #fb718fff;
+  --rose-500: #f43f67ff;
+  --rose-600: #e11d48ff;
+  --rose-700: #be1238ff;
+  --rose-800: #9f1231ff;
+  --rose-900: #88132dff;
+  --rose-950: #4c0515ff;
+  --sky-50: #f0faffff;
+  --sky-100: #e0f5feff;
+  --sky-200: #bae8fdff;
+  --sky-300: #7dd5fcff;
+  --sky-400: #38bcf8ff;
+  --sky-500: #0ea5e9ff;
+  --sky-600: #028ac7ff;
+  --sky-700: #0370a1ff;
+  --sky-800: #075e85ff;
+  --sky-900: #0c506eff;
+  --sky-950: #083549ff;
+  --teal-50: #f0fdfcff;
+  --teal-100: #ccfbf7ff;
+  --teal-200: #99f6eeff;
+  --teal-300: #5eeadeff;
+  --teal-400: #2dd4c5ff;
+  --teal-500: #14b8a9ff;
+  --teal-600: #0d9488ff;
+  --teal-700: #0f766dff;
+  --teal-800: #115e57ff;
+  --teal-900: #134e49ff;
+  --teal-950: #042f2bff;
+  --violet-50: #f7f3ffff;
+  --violet-100: #f1e9feff;
+  --violet-200: #e5d6feff;
+  --violet-300: #d0b5fdff;
+  --violet-400: #b48bfaff;
+  --violet-500: #955cf6ff;
+  --violet-600: #7c3aedff;
+  --violet-700: #6928d9ff;
+  --violet-800: #5821b6ff;
+  --violet-900: #491d95ff;
+  --violet-950: #2f1065ff;
+  --yellow-50: #fef7e8ff;
+  --yellow-100: #feebc3ff;
+  --yellow-200: #fed98aff;
+  --yellow-300: #fdc247ff;
+  --yellow-400: #fab015ff;
+  --yellow-500: #eaa108ff;
+  --yellow-600: #ca8a04ff;
+  --yellow-700: #a16f07ff;
+  --yellow-800: #855f0eff;
+  --yellow-900: #715212ff;
+  --yellow-950: #422f06ff;
+
+  --dawn-brand-default: light-dark(var(--blue-700), var(--blue-400));
+  --dawn-brand-muted: light-dark(var(--blue-800), var(--blue-300));
+  --dawn-brand-subtle: light-dark(var(--blue-100), var(--blue-950));
+  --dawn-brand-on-default: light-dark(var(--white), var(--neutral-950));
+  --dawn-brand-container: light-dark(var(--blue-50), var(--blue-950));
+  --dawn-brand-container-high: light-dark(var(--blue-100), var(--blue-900));
+  --dawn-brand-on-container: light-dark(var(--blue-900), var(--blue-200));
+  --dawn-brand-on-container-muted: light-dark(var(--blue-700), var(--blue-400));
+  --dawn-brand-border: light-dark(var(--blue-300), var(--blue-700));
+  --dawn-brand-border-strong: light-dark(var(--blue-600), var(--blue-400));
+  --dawn-brand-shadow: light-dark(#005ba740, #30acff66);
+
+  --dawn-accent-default: light-dark(var(--lime-700), var(--lime-400));
+  --dawn-accent-muted: light-dark(var(--lime-800), var(--lime-300));
+  --dawn-accent-subtle: light-dark(var(--lime-100), var(--green-950));
+  --dawn-accent-on-default: light-dark(var(--white), var(--neutral-950));
+  --dawn-accent-container: light-dark(var(--lime-50), var(--lime-950));
+  --dawn-accent-container-high: light-dark(var(--lime-100), var(--lime-900));
+  --dawn-accent-on-container: light-dark(var(--lime-900), var(--lime-200));
+  --dawn-accent-on-container-muted: light-dark(var(--lime-700), var(--lime-400));
+  --dawn-accent-border: light-dark(var(--lime-300), var(--green-700));
+  --dawn-accent-border-strong: light-dark(var(--lime-600), var(--lime-400));
+  --dawn-accent-shadow: light-dark(#197c4b40, #4fd99466);
+
+  --dawn-neutral-default: light-dark(var(--neutral-700), var(--neutral-100));
+  --dawn-neutral-muted: light-dark(var(--neutral-800), var(--neutral-300));
+  --dawn-neutral-subtle: light-dark(var(--neutral-200), var(--neutral-800));
+  --dawn-neutral-on-default: light-dark(var(--white), var(--neutral-950));
+  --dawn-neutral-container: light-dark(var(--neutral-200), var(--neutral-800));
+  --dawn-neutral-container-high: light-dark(var(--neutral-300), var(--neutral-700));
+  --dawn-neutral-on-container: light-dark(var(--neutral-900), var(--neutral-100));
+  --dawn-neutral-on-container-muted: light-dark(var(--neutral-600), var(--neutral-400));
+  --dawn-neutral-border: light-dark(var(--neutral-400), var(--neutral-600));
+  --dawn-neutral-border-strong: light-dark(var(--neutral-500), var(--neutral-400));
+  --dawn-neutral-shadow: light-dark(#00000030, #0000004f);
+
+  --dawn-error-default: light-dark(var(--red-700), var(--red-500));
+  --dawn-error-muted: light-dark(var(--red-800), var(--red-400));
+  --dawn-error-subtle: light-dark(var(--red-100), var(--red-950));
+  --dawn-error-on-default: light-dark(var(--white), var(--neutral-950));
+  --dawn-error-container: light-dark(var(--red-50), var(--red-950));
+  --dawn-error-container-high: light-dark(var(--red-100), var(--red-900));
+  --dawn-error-on-container: light-dark(var(--red-900), var(--red-200));
+  --dawn-error-on-container-muted: light-dark(var(--red-700), var(--red-400));
+  --dawn-error-border: light-dark(var(--red-300), var(--red-700));
+  --dawn-error-border-strong: light-dark(var(--red-600), var(--red-400));
+  --dawn-error-shadow: light-dark(#b91c1c40, #f8717166);
+
+  --dawn-info-default: light-dark(var(--cyan-700), var(--cyan-400));
+  --dawn-info-muted: light-dark(var(--cyan-800), var(--cyan-300));
+  --dawn-info-subtle: light-dark(var(--cyan-100), var(--cyan-950));
+  --dawn-info-on-default: light-dark(var(--white), var(--neutral-950));
+  --dawn-info-container: light-dark(var(--cyan-50), var(--cyan-950));
+  --dawn-info-container-high: light-dark(var(--cyan-100), var(--cyan-900));
+  --dawn-info-on-container: light-dark(var(--cyan-900), var(--cyan-200));
+  --dawn-info-on-container-muted: light-dark(var(--cyan-700), var(--cyan-400));
+  --dawn-info-border: light-dark(var(--cyan-300), var(--cyan-700));
+  --dawn-info-border-strong: light-dark(var(--cyan-600), var(--cyan-400));
+  --dawn-info-shadow: light-dark(#0e7d9040, #22d0ee66);
+
+  --dawn-success-default: light-dark(var(--green-700), var(--green-400));
+  --dawn-success-muted: light-dark(var(--green-800), var(--green-300));
+  --dawn-success-subtle: light-dark(var(--green-100), var(--green-950));
+  --dawn-success-on-default: light-dark(var(--white), var(--neutral-950));
+  --dawn-success-container: light-dark(var(--green-50), var(--green-950));
+  --dawn-success-container-high: light-dark(var(--green-100), var(--green-900));
+  --dawn-success-on-container: light-dark(var(--green-900), var(--green-200));
+  --dawn-success-on-container-muted: light-dark(var(--green-700), var(--green-400));
+  --dawn-success-border: light-dark(var(--green-300), var(--green-700));
+  --dawn-success-border-strong: light-dark(var(--green-600), var(--green-400));
+  --dawn-success-shadow: light-dark(#15803c40, #4ade8040);
+
+  --dawn-warning-default: light-dark(var(--orange-700), var(--amber-400));
+  --dawn-warning-muted: light-dark(var(--orange-800), var(--amber-300));
+  --dawn-warning-subtle: light-dark(var(--orange-100), var(--amber-950));
+  --dawn-warning-on-default: light-dark(var(--white), var(--neutral-950));
+  --dawn-warning-container: light-dark(var(--orange-50), var(--amber-950));
+  --dawn-warning-container-high: light-dark(var(--orange-100), var(--amber-900));
+  --dawn-warning-on-container: light-dark(var(--orange-900), var(--amber-200));
+  --dawn-warning-on-container-muted: light-dark(var(--orange-700), var(--amber-400));
+  --dawn-warning-border: light-dark(var(--orange-300), var(--amber-700));
+  --dawn-warning-border-strong: light-dark(var(--orange-600), var(--amber-400));
+  --dawn-warning-shadow: light-dark(#c24a0c40, #fcab4d40);
+
+  --dawn-surface-background: light-dark(var(--neutral-50), var(--neutral-950));
+  --dawn-surface: light-dark(var(--white), var(--neutral-900));
+  --dawn-surface-2: light-dark(var(--white), var(--neutral-800));
+  --dawn-surface-3: light-dark(var(--white), var(--neutral-700));
+  --dawn-surface-low: light-dark(var(--neutral-200), var(--black));
+  --dawn-on-surface: light-dark(var(--neutral-900), var(--neutral-50));
+  --dawn-on-surface-variant: light-dark(var(--neutral-600), var(--neutral-400));
+  --dawn-on-surface-muted: light-dark(var(--neutral-400), var(--neutral-600));
+  --dawn-on-surface-disabled: light-dark(var(--neutral-300), var(--neutral-700));
+  --dawn-border: light-dark(var(--neutral-200), var(--neutral-800));
+  --dawn-border-strong: light-dark(var(--neutral-400), var(--neutral-600));
+  --dawn-surface-inverse: light-dark(var(--neutral-900), var(--neutral-100));
+  --dawn-on-surface-inverse: light-dark(var(--neutral-100), var(--neutral-900));
+  --dawn-surface-focus-ring: var(--dawn-brand-default);
+  --dawn-scrim: light-dark(#1a1a1acc, #000000cc);
+  --dawn-shadow: light-dark(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.25));
+  --dawn-shadow-strong: light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4));
+
+  --dawn-font-heading: 'Manrope', sans-serif;
+  --dawn-font-body: 'Inter', sans-serif;
+
+  --dawn-text-xs: clamp(0.5208rem, 0.4721rem + 0.2167vw, 0.64rem);
+  --dawn-text-sm: clamp(0.625rem, 0.5534rem + 0.3182vw, 0.8rem);
+  --dawn-text-base: clamp(0.75rem, 0.6477rem + 0.4545vw, 1rem);
+  --dawn-text-lg: clamp(0.9rem, 0.7568rem + 0.6364vw, 1.25rem);
+  --dawn-text-xl: clamp(1.08rem, 0.8826rem + 0.8773vw, 1.5625rem);
+  --dawn-text-2xl: clamp(1.296rem, 1.0272rem + 1.1948vw, 1.9531rem);
+  --dawn-text-3xl: clamp(1.5552rem, 1.1927rem + 1.6113vw, 2.4414rem);
+  --dawn-text-4xl: clamp(1.8662rem, 1.3813rem + 2.1555vw, 3.0518rem);
+
+  --dawn-spacing-0: 0rem;
+  --dawn-spacing-3xs: clamp(0.1875rem, 0.1619rem + 0.1136vw, 0.25rem);
+  --dawn-spacing-2xs: clamp(0.375rem, 0.3239rem + 0.2273vw, 0.5rem);
+  --dawn-spacing-xs: clamp(0.5625rem, 0.4858rem + 0.3409vw, 0.75rem);
+  --dawn-spacing-sm: clamp(0.75rem, 0.6477rem + 0.4545vw, 1rem);
+  --dawn-spacing-md: clamp(1.125rem, 0.9716rem + 0.6818vw, 1.5rem);
+  --dawn-spacing-lg: clamp(1.5rem, 1.2955rem + 0.9091vw, 2rem);
+  --dawn-spacing-xl: clamp(2.25rem, 1.9432rem + 1.3636vw, 3rem);
+  --dawn-spacing-2xl: clamp(3rem, 2.5909rem + 1.8182vw, 4rem);
+  --dawn-spacing-3xl: clamp(4.5rem, 3.8864rem + 2.7273vw, 6rem);
+  --dawn-spacing-3xs-2xs: clamp(0.1875rem, 0.0597rem + 0.5682vw, 0.5rem);
+  --dawn-spacing-2xs-xs: clamp(0.375rem, 0.2216rem + 0.6818vw, 0.75rem);
+  --dawn-spacing-xs-sm: clamp(0.5625rem, 0.3835rem + 0.7955vw, 1rem);
+  --dawn-spacing-sm-md: clamp(0.75rem, 0.4432rem + 1.3636vw, 1.5rem);
+  --dawn-spacing-md-lg: clamp(1.125rem, 0.767rem + 1.5909vw, 2rem);
+  --dawn-spacing-lg-xl: clamp(1.5rem, 0.8864rem + 2.7273vw, 3rem);
+  --dawn-spacing-xl-2xl: clamp(2.25rem, 1.5341rem + 3.1818vw, 4rem);
+  --dawn-spacing-2xl-3xl: clamp(3rem, 1.7727rem + 5.4545vw, 6rem);
+  --dawn-spacing-sm-lg: clamp(0.75rem, 0.2386rem + 2.2727vw, 2rem);
+
+  --dawn-blur-2xs: blur(4px);
+  --dawn-blur-xs: blur(8px);
+  --dawn-blur-sm: blur(12px);
+  --dawn-blur-md: blur(16px);
+  --dawn-blur-lg: blur(20px);
+  --dawn-blur-xl: blur(24px);
+  --dawn-blur-2xl: blur(32px);
+
+  --dawn-shadow-2xs: 0px 1px 2px;
+  --dawn-shadow-xs: 0px 2px 4px;
+  --dawn-shadow-sm: 0px 3px 6px;
+  --dawn-shadow-md: 0px 6px 10px;
+  --dawn-shadow-lg: 0px 10px 18px;
+  --dawn-shadow-xl: 0px 16px 24px;
+  --dawn-shadow-2xl: 0px 24px 32px;
+
+  --dawn-inset-shadow-2xs: inset 0px 1px 2px var(--dawn-shadow);
+  --dawn-inset-shadow-xs: inset 0px 2px 4px var(--dawn-shadow);
+  --dawn-inset-shadow-sm: inset 0px 4px 6px var(--dawn-shadow);
+  --dawn-inset-shadow-md: inset 0px 6px 10px var(--dawn-shadow);
+  --dawn-inset-shadow-lg: inset 0px 10px 16px var(--dawn-shadow);
+  --dawn-inset-shadow-xl: inset 0px 12px 24px var(--dawn-shadow);
+  --dawn-inset-shadow-2xl: inset 0px 16px 32px var(--dawn-shadow);
+
+  --dawn-border-width-xs: 1px;
+  --dawn-border-width-sm: 2px;
+  --dawn-border-width-md: 3px;
+  --dawn-border-width-lg: 4px;
+  --dawn-border-width-xl: 6px;
+  --dawn-border-width-2xl: 8px;
+
+  --dawn-outline-width-xs: 1px;
+  --dawn-outline-width-sm: 2px;
+  --dawn-outline-width-md: 3px;
+  --dawn-outline-width-lg: 4px;
+  --dawn-outline-width-xl: 6px;
+  --dawn-outline-width-2xl: 8px;
+
+  --dawn-radius-xs: 2px;
+  --dawn-radius-sm: 4px;
+  --dawn-radius-md: 6px;
+  --dawn-radius-lg: 8px;
+  --dawn-radius-xl: 12px;
+  --dawn-radius-2xl: 16px;
+  --dawn-radius-3xl: 24px;
+  --dawn-radius-4xl: 32px;
+  --dawn-radius-full: 9999px;
+}
+
+[data-theme='light'] {
+  color-scheme: light;
+}
+
+[data-theme='dark'] {
+  color-scheme: dark;
+}
+
+@layer base {
+  body {
+    background-color: theme(--color-surface-background);
+    color: theme(--color-on-surface);
+    font-family: var(--font-body);
+    font-size: var(--text-base);
+    scrollbar-color: theme(--color-accent-default) theme(--color-surface-2);
+  }
+}
+
+@utility shadow-* {
+  box-shadow: --value(--shadow-*) var(--dawn-shadow);
+}
+
+@utility style-text-* {
+  font-family: var(--text-font);
+  font-weight: var(--text-weight);
+  font-size: var(--text-size);
+  line-height: var(--text-leading, normal);
+  letter-spacing: normal;
+}
+
+@utility style-text-default-5 {
+  --text-font: var(--font-body);
+  --text-weight: 500;
+  --text-size: var(--text-4xl);
+}
+
+@utility style-text-default-4 {
+  --text-font: var(--font-body);
+  --text-weight: 500;
+  --text-size: var(--text-3xl);
+}
+
+@utility style-text-default-3 {
+  --text-font: var(--font-body);
+  --text-weight: 500;
+  --text-size: var(--text-2xl);
+}
+
+@utility style-text-default-2 {
+  --text-font: var(--font-body);
+  --text-weight: 500;
+  --text-size: var(--text-xl);
+}
+
+@utility style-text-default-1 {
+  --text-font: var(--font-body);
+  --text-weight: 500;
+  --text-size: var(--text-lg);
+}
+
+@utility style-text-default-0 {
+  --text-font: var(--font-body);
+  --text-weight: 500;
+  --text-size: var(--text-base);
+}
+
+@utility style-text-default--1 {
+  --text-font: var(--font-body);
+  --text-weight: 500;
+  --text-size: var(--text-sm);
+}
+
+@utility style-text-default--2 {
+  --text-font: var(--font-body);
+  --text-weight: 500;
+  --text-size: var(--text-xs);
+}
+
+@utility style-text-prose-5 {
+  --text-font: var(--font-body);
+  --text-weight: 400;
+  --text-size: var(--text-4xl);
+  --text-leading: 160%;
+}
+
+@utility style-text-prose-4 {
+  --text-font: var(--font-body);
+  --text-weight: 400;
+  --text-size: var(--text-3xl);
+  --text-leading: 160%;
+}
+
+@utility style-text-prose-3 {
+  --text-font: var(--font-body);
+  --text-weight: 400;
+  --text-size: var(--text-2xl);
+  --text-leading: 160%;
+}
+
+@utility style-text-prose-2 {
+  --text-font: var(--font-body);
+  --text-weight: 400;
+  --text-size: var(--text-xl);
+  --text-leading: 160%;
+}
+
+@utility style-text-prose-1 {
+  --text-font: var(--font-body);
+  --text-weight: 400;
+  --text-size: var(--text-lg);
+  --text-leading: 160%;
+}
+
+@utility style-text-prose-0 {
+  --text-font: var(--font-body);
+  --text-weight: 400;
+  --text-size: var(--text-base);
+  --text-leading: 160%;
+}
+
+@utility style-text-prose--1 {
+  --text-font: var(--font-body);
+  --text-weight: 400;
+  --text-size: var(--text-sm);
+  --text-leading: 160%;
+}
+
+@utility style-text-prose--2 {
+  --text-font: var(--font-body);
+  --text-weight: 400;
+  --text-size: var(--text-xs);
+  --text-leading: 160%;
+}
+
+@utility style-text-strong-5 {
+  --text-font: var(--font-heading);
+  --text-weight: 700;
+  --text-size: var(--text-4xl);
+  --text-leading: 120%;
+}
+
+@utility style-text-strong-4 {
+  --text-font: var(--font-heading);
+  --text-weight: 700;
+  --text-size: var(--text-3xl);
+  --text-leading: 120%;
+}
+
+@utility style-text-strong-3 {
+  --text-font: var(--font-heading);
+  --text-weight: 700;
+  --text-size: var(--text-2xl);
+  --text-leading: 120%;
+}
+
+@utility style-text-strong-2 {
+  --text-font: var(--font-heading);
+  --text-weight: 700;
+  --text-size: var(--text-xl);
+  --text-leading: 120%;
+}
+
+@utility style-text-strong-1 {
+  --text-font: var(--font-heading);
+  --text-weight: 700;
+  --text-size: var(--text-lg);
+  --text-leading: 120%;
+}
+
+@utility style-text-strong-0 {
+  --text-font: var(--font-heading);
+  --text-weight: 700;
+  --text-size: var(--text-base);
+  --text-leading: 120%;
+}
+
+@utility style-text-strong--1 {
+  --text-font: var(--font-heading);
+  --text-weight: 700;
+  --text-size: var(--text-sm);
+  --text-leading: 120%;
+}
+
+@utility style-text-strong--2 {
+  --text-font: var(--font-heading);
+  --text-weight: 700;
+  --text-size: var(--text-xs);
+  --text-leading: 120%;
+}