My Skeleton Pink City Theme

my-skeleton-pink-city-theme.postcss

:root {
	/* =~= Theme Properties =~= */
	--theme-font-family-base: system-ui;
	--theme-font-family-heading: system-ui;
	--theme-font-color-base: 0 0 0;
	--theme-font-color-dark: 255 255 255;
	--theme-rounded-base: 9999px;
	--theme-rounded-container: 8px;
	--theme-border-base: 1px;
	/* =~= Theme On-X Colors =~= */
	--on-primary: 0 0 0;
	--on-secondary: 0 0 0;
	--on-tertiary: 0 0 0;
	--on-success: 0 0 0;
	--on-warning: 0 0 0;
	--on-error: 255 255 255;
	--on-surface: 0 0 0;
	/* =~= Theme Colors  =~= */
	/* primary | #FF00FF */
	--color-primary-50: 255 217 255; /* ⬅ #ffd9ff */
	--color-primary-100: 255 204 255; /* ⬅ #ffccff */
	--color-primary-200: 255 191 255; /* ⬅ #ffbfff */
	--color-primary-300: 255 153 255; /* ⬅ #ff99ff */
	--color-primary-400: 255 77 255; /* ⬅ #ff4dff */
	--color-primary-500: 255 0 255; /* ⬅ #FF00FF */
	--color-primary-600: 230 0 230; /* ⬅ #e600e6 */
	--color-primary-700: 191 0 191; /* ⬅ #bf00bf */
	--color-primary-800: 153 0 153; /* ⬅ #990099 */
	--color-primary-900: 125 0 125; /* ⬅ #7d007d */
	/* secondary | #FFC0CB */
	--color-secondary-50: 255 246 247; /* ⬅ #fff6f7 */
	--color-secondary-100: 255 242 245; /* ⬅ #fff2f5 */
	--color-secondary-200: 255 239 242; /* ⬅ #ffeff2 */
	--color-secondary-300: 255 230 234; /* ⬅ #ffe6ea */
	--color-secondary-400: 255 211 219; /* ⬅ #ffd3db */
	--color-secondary-500: 255 192 203; /* ⬅ #FFC0CB */
	--color-secondary-600: 230 173 183; /* ⬅ #e6adb7 */
	--color-secondary-700: 191 144 152; /* ⬅ #bf9098 */
	--color-secondary-800: 153 115 122; /* ⬅ #99737a */
	--color-secondary-900: 125 94 99; /* ⬅ #7d5e63 */
	/* tertiary | #FFD9E6 */
	--color-tertiary-50: 255 249 251; /* ⬅ #fff9fb */
	--color-tertiary-100: 255 247 250; /* ⬅ #fff7fa */
	--color-tertiary-200: 255 246 249; /* ⬅ #fff6f9 */
	--color-tertiary-300: 255 240 245; /* ⬅ #fff0f5 */
	--color-tertiary-400: 255 228 238; /* ⬅ #ffe4ee */
	--color-tertiary-500: 255 217 230; /* ⬅ #FFD9E6 */
	--color-tertiary-600: 230 195 207; /* ⬅ #e6c3cf */
	--color-tertiary-700: 191 163 173; /* ⬅ #bfa3ad */
	--color-tertiary-800: 153 130 138; /* ⬅ #99828a */
	--color-tertiary-900: 125 106 113; /* ⬅ #7d6a71 */
	/* success | #00A86B */
	--color-success-50: 217 242 233; /* ⬅ #d9f2e9 */
	--color-success-100: 204 238 225; /* ⬅ #cceee1 */
	--color-success-200: 191 233 218; /* ⬅ #bfe9da */
	--color-success-300: 153 220 196; /* ⬅ #99dcc4 */
	--color-success-400: 77 194 151; /* ⬅ #4dc297 */
	--color-success-500: 0 168 107; /* ⬅ #00A86B */
	--color-success-600: 0 151 96; /* ⬅ #009760 */
	--color-success-700: 0 126 80; /* ⬅ #007e50 */
	--color-success-800: 0 101 64; /* ⬅ #006540 */
	--color-success-900: 0 82 52; /* ⬅ #005234 */
	/* warning | #DAA520 */
	--color-warning-50: 249 242 222; /* ⬅ #f9f2de */
	--color-warning-100: 248 237 210; /* ⬅ #f8edd2 */
	--color-warning-200: 246 233 199; /* ⬅ #f6e9c7 */
	--color-warning-300: 240 219 166; /* ⬅ #f0dba6 */
	--color-warning-400: 229 192 99; /* ⬅ #e5c063 */
	--color-warning-500: 218 165 32; /* ⬅ #DAA520 */
	--color-warning-600: 196 149 29; /* ⬅ #c4951d */
	--color-warning-700: 164 124 24; /* ⬅ #a47c18 */
	--color-warning-800: 131 99 19; /* ⬅ #836313 */
	--color-warning-900: 107 81 16; /* ⬅ #6b5110 */
	/* error | #DC143C */
	--color-error-50: 250 220 226; /* ⬅ #fadce2 */
	--color-error-100: 248 208 216; /* ⬅ #f8d0d8 */
	--color-error-200: 246 196 206; /* ⬅ #f6c4ce */
	--color-error-300: 241 161 177; /* ⬅ #f1a1b1 */
	--color-error-400: 231 91 119; /* ⬅ #e75b77 */
	--color-error-500: 220 20 60; /* ⬅ #DC143C */
	--color-error-600: 198 18 54; /* ⬅ #c61236 */
	--color-error-700: 165 15 45; /* ⬅ #a50f2d */
	--color-error-800: 132 12 36; /* ⬅ #840c24 */
	--color-error-900: 108 10 29; /* ⬅ #6c0a1d */
	/* surface | #F2F2F2 */
	--color-surface-50: 253 253 253; /* ⬅ #fdfdfd */
	--color-surface-100: 252 252 252; /* ⬅ #fcfcfc */
	--color-surface-200: 252 252 252; /* ⬅ #fcfcfc */
	--color-surface-300: 250 250 250; /* ⬅ #fafafa */
	--color-surface-400: 246 246 246; /* ⬅ #f6f6f6 */
	--color-surface-500: 242 242 242; /* ⬅ #F2F2F2 */
	--color-surface-600: 218 218 218; /* ⬅ #dadada */
	--color-surface-700: 182 182 182; /* ⬅ #b6b6b6 */
	--color-surface-800: 145 145 145; /* ⬅ #919191 */
	--color-surface-900: 119 119 119; /* ⬅ #777777 */
	
}