@tailwind base; @tailwind components; @tailwind utilities; /* Brand palette variables. :root holds the Advokate (default) values; the .brand-planifi class (stamped on by the layout) overrides them. Channels are space-separated RGB so Tailwind's `/ ` works. */ :root { --brand-ocean: 1 71 95; --brand-pine: 1 58 55; --brand-lime: 169 220 21; --brand-leaf: 139 197 64; --brand-green: 67 172 71; --brand-mint: 66 205 152; --brand-mist: 209 244 209; --brand-cream: 252 248 245; --gradient-soft: linear-gradient(135deg, #FCF8F5 0%, #D1F4D1 100%); --gradient-ocean: radial-gradient(700px circle at 0% 0%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 58%), linear-gradient(135deg, #01475F 0%, #013A37 100%); --gradient-sea: radial-gradient(700px circle at 0% 0%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 58%), linear-gradient(135deg, #01475F 0%, #42CD98 100%); --gradient-leaf: linear-gradient(135deg, #8BC540 0%, #43AC47 100%); } .brand-planifi { --brand-ocean: 30 64 175; --brand-pine: 30 58 138; --brand-lime: 56 189 248; --brand-leaf: 59 130 246; --brand-green: 37 99 235; --brand-mint: 14 165 233; --brand-mist: 219 234 254; --brand-cream: 248 250 252; --gradient-soft: linear-gradient(135deg, #F8FAFC 0%, #DBEAFE 100%); --gradient-ocean: radial-gradient(700px circle at 0% 0%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 58%), linear-gradient(135deg, #1E40AF 0%, #1E3A8A 100%); --gradient-sea: radial-gradient(700px circle at 0% 0%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 58%), linear-gradient(135deg, #1E40AF 0%, #0EA5E9 100%); --gradient-leaf: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%); } @layer base { body { @apply font-sans bg-brand-cream text-slate-900; } h1, h2, h3 { @apply font-display; } h4, h5, h6 { @apply font-subhead font-bold; } } @layer utilities { .h-app { height: var(--app-height, 100dvh); } } /* @layer components { .btn-primary { @apply py-2 px-4 bg-blue-200; } } */