/* Design system da Joya — tokens de cor em CSS custom properties. Por que variaveis e nao hex no tailwind.config: os templates ja usavam `bg-brand-surface`, `text-brand-muted`, `bg-rose-100` etc. em ~2.000 lugares. Apontando as cores do Tailwind para variaveis, trocar de tema e trocar o valor da variavel — nenhum template precisa de par `dark:`. O `.dark` no (colocado pelo script anti-flash do base.html) faz o resto. Formato "R G B" sem funcao: e o que permite o `` do Tailwind continuar funcionando, entao `bg-primary/10` e `bg-accent/15` seguem validos. --- As rampas --------------------------------------------------------------- No claro sao exatamente as do Tailwind 3.4. No escuro cada tom recebe o valor de OUTRO tom da mesma rampa, escolhido pelo papel que aquele tom exerce nos templates: 50-300 sao fundo/borda de chip e alerta -> recebem o extremo escuro 600-900 sao texto sobre esse chip -> recebem o extremo claro 400-500 sao bolinha de status e barra -> ficam onde estao Matizes de estado: 50->950 100->900 200->800 300->700 400->400 500->500 600->400 700->300 800->200 900->100 Slate: 50->900 100->800 200->700 300->600 400->400 500->400 600->300 700->200 800->100 900->50 Slate-500 e a unica excecao ao "400-500 ficam onde estao": ele so aparece como texto (nenhum `bg-slate-500` nos templates), e mantido no lugar media 3,07:1 sobre o fundo escuro. Em 400 vai a 6,96:1. Slate anda um passo mais claro porque carrega as superficies: com o mesmo mapeamento dos matizes, `bg-slate-100` (chip) cairia em #0f172a, o mesmo valor de `--brand-surface`, e o chip sumiria dentro do card. Conferido nas receitas que os templates usam de fato: nenhuma combinacao texto/fundo fica abaixo de 5:1 no escuro. */ :root { --brand-bg: 248 250 252; --brand-surface: 255 255 255; --brand-hover: 241 245 249; --brand-border: 226 232 240; --brand-text: 15 23 42; --brand-muted: 71 85 105; --brand-disabled: 148 163 184; --brand-table-header: 226 232 240; --brand-zebra: 248 250 252; --brand-row-hover: 224 242 254; --primary: 47 62 158; --primary-600: 47 62 158; --primary-700: 38 51 128; --accent: 29 161 185; --accent-500: 29 161 185; --status-success: 34 197 94; --status-warning: 245 158 11; --status-error: 239 68 68; --status-info: 59 130 246; /* Sempre escuro, nos dois temas: e o veu atras do modal. */ --brand-overlay: 15 23 42; /* Botao destrutivo. Fixo porque leva texto branco por cima nos dois temas — acompanhar a rampa do rose deixaria o branco em 2,5:1 no escuro. */ --danger: 225 29 72; --danger-700: 190 18 60; /* Tinta escura para o unico fundo que nao muda: o gradiente `entry-mixed`. */ --on-fixed-light: 15 23 42; --slate-50: 248 250 252; --slate-100: 241 245 249; --slate-200: 226 232 240; --slate-300: 203 213 225; --slate-400: 148 163 184; --slate-500: 100 116 139; --slate-600: 71 85 105; --slate-700: 51 65 85; --slate-800: 30 41 59; --slate-900: 15 23 42; --rose-50: 255 241 242; --rose-100: 255 228 230; --rose-200: 254 205 211; --rose-300: 253 164 175; --rose-400: 251 113 133; --rose-500: 244 63 94; --rose-600: 225 29 72; --rose-700: 190 18 60; --rose-800: 159 18 57; --rose-900: 136 19 55; --emerald-50: 236 253 245; --emerald-100: 209 250 229; --emerald-200: 167 243 208; --emerald-300: 110 231 183; --emerald-400: 52 211 153; --emerald-500: 16 185 129; --emerald-600: 5 150 105; --emerald-700: 4 120 87; --emerald-800: 6 95 70; --emerald-900: 6 78 59; --amber-50: 255 251 235; --amber-100: 254 243 199; --amber-200: 253 230 138; --amber-300: 252 211 77; --amber-400: 251 191 36; --amber-500: 245 158 11; --amber-600: 217 119 6; --amber-700: 180 83 9; --amber-800: 146 64 14; --amber-900: 120 53 15; --blue-50: 239 246 255; --blue-100: 219 234 254; --blue-200: 191 219 254; --blue-300: 147 197 253; --blue-400: 96 165 250; --blue-500: 59 130 246; --blue-600: 37 99 235; --blue-700: 29 78 216; --blue-800: 30 64 175; --blue-900: 30 58 138; --violet-50: 245 243 255; --violet-100: 237 233 254; --violet-200: 221 214 254; --violet-300: 196 181 253; --violet-400: 167 139 250; --violet-500: 139 92 246; --violet-600: 124 58 237; --violet-700: 109 40 217; --violet-800: 91 33 182; --violet-900: 76 29 149; --purple-50: 250 245 255; --purple-100: 243 232 255; --purple-200: 233 213 255; --purple-300: 216 180 254; --purple-400: 192 132 252; --purple-500: 168 85 247; --purple-600: 147 51 234; --purple-700: 126 34 206; --purple-800: 107 33 168; --purple-900: 88 28 135; } .dark { --brand-bg: 2 6 23; --brand-surface: 15 23 42; --brand-hover: 30 41 59; --brand-border: 49 55 72; --brand-text: 241 245 249; --brand-muted: 148 163 184; --brand-disabled: 100 116 139; --brand-table-header: 30 41 59; --brand-zebra: 19 28 47; --brand-row-hover: 30 41 59; --primary: 119 141 220; --primary-600: 119 141 220; --primary-700: 143 166 247; --accent: 56 189 212; --accent-500: 56 189 212; --status-success: 52 211 153; --status-warning: 251 191 36; --status-error: 251 113 133; --status-info: 96 165 250; --slate-50: 15 23 42; --slate-100: 30 41 59; --slate-200: 51 65 85; --slate-300: 71 85 105; --slate-400: 148 163 184; --slate-500: 148 163 184; --slate-600: 203 213 225; --slate-700: 226 232 240; --slate-800: 241 245 249; --slate-900: 248 250 252; --rose-50: 76 5 25; --rose-100: 136 19 55; --rose-200: 159 18 57; --rose-300: 190 18 60; --rose-400: 251 113 133; --rose-500: 244 63 94; --rose-600: 251 113 133; --rose-700: 253 164 175; --rose-800: 254 205 211; --rose-900: 255 228 230; --emerald-50: 2 44 34; --emerald-100: 6 78 59; --emerald-200: 6 95 70; --emerald-300: 4 120 87; --emerald-400: 52 211 153; --emerald-500: 16 185 129; --emerald-600: 52 211 153; --emerald-700: 110 231 183; --emerald-800: 167 243 208; --emerald-900: 209 250 229; --amber-50: 69 26 3; --amber-100: 120 53 15; --amber-200: 146 64 14; --amber-300: 180 83 9; --amber-400: 251 191 36; --amber-500: 245 158 11; --amber-600: 251 191 36; --amber-700: 252 211 77; --amber-800: 253 230 138; --amber-900: 254 243 199; --blue-50: 23 37 84; --blue-100: 30 58 138; --blue-200: 30 64 175; --blue-300: 29 78 216; --blue-400: 96 165 250; --blue-500: 59 130 246; --blue-600: 96 165 250; --blue-700: 147 197 253; --blue-800: 191 219 254; --blue-900: 219 234 254; --violet-50: 46 16 101; --violet-100: 76 29 149; --violet-200: 91 33 182; --violet-300: 109 40 217; --violet-400: 167 139 250; --violet-500: 139 92 246; --violet-600: 167 139 250; --violet-700: 196 181 253; --violet-800: 221 214 254; --violet-900: 237 233 254; --purple-50: 59 7 100; --purple-100: 88 28 135; --purple-200: 107 33 168; --purple-300: 126 34 206; --purple-400: 192 132 252; --purple-500: 168 85 247; --purple-600: 192 132 252; --purple-700: 216 180 254; --purple-800: 233 213 255; --purple-900: 243 232 255; }