@tailwind base; @tailwind components; @tailwind utilities; .light { --black: 10, 16, 19; --white: 243, 252, 248; --absolute-black: 0, 0, 0; --absolute-white: 255, 255, 255; /* Use these in tailwind.config.cjs */ --primary: var(--black); --secondary: var(--black); --tertiary: var(--black); --text: var(--black); --textInverted: var(--absolute-white); --link: var(--black); --background: var(--white); } .dark { --black: 10, 16, 19;:root { } --white: 243, 252, 248; --absolute-black: 0, 0, 0; --absolute-white: 255, 255, 255; /* Use these in tailwind.config.cjs */ --primary: var(--white); --secondary: var(--white); --tertiary: var(--white); --text: var(--white); --textInverted: var(--absolute-black); --link: var(--white); --background: var(--black); } .autonomic { /* Palette */ /* RGBA instead of hex so that opacity will work */ --absolute-white: 255, 255, 255; --white: 243, 252, 248; --shocking-pink: 253, 0, 159; --shamrock-green: 0, 198, 88; --bubblegum-pink: 255, 133, 203; --bright-orange: 255, 96, 21; /* Use these in tailwind.config.cjs */ --primary: var(--shocking-pink); --secondary: var(--shamrock-green); --tertiary: var(--bright-orange); --text: var(--shocking-pink); --textInverted: var(--absolute-white); --link: var(--shamrock-green); --background: var(--white); } @layer components { :root { @apply ring-secondary; } h1 { @apply text-5xl font-bold; } h2 { @apply text-4xl font-semibold; } h3 { @apply text-2xl font-semibold; } h4, h5, h6 { @apply text-xl font-semibold; } p, span, li, a { @apply text-xl; } a { @apply text-link underline; } ol { @apply list-decimal; } ul { @apply list-disc; } select { @apply bg-background border-primary border px-2 h-8 text-lg; } input { @apply bg-background border-primary border px-2 h-8 text-lg; } }