/*
Primitive colour scales, copied from the ds-proto design system
(src/app/globals.css). Eight scales of ten steps on an even OKLCH lightness
ramp, mirrored between themes: 100-300 backgrounds, 400-600 borders, 700-800
solid fills, 900-1000 text. Step 700 is the same in both themes.

Coloured text uses --<hue>-text, never --<hue>-900: in light, 900 lands where
amber reads as mud and red as maroon; the text step sits at ~L54 and clears
4.5:1 on white and on the hue's 100/200 tints.

Gray 100-500 are untinted here (--neutral-gray-*); pensero-colors.css mixes
the brand tint into them to produce --gray-100..500. Everything else in the
product should reference a semantic token from pensero-colors.css, not a step
in this file.
*/

:root {
    --black: #000000;
    --white: #FFFFFF;

    /* GRAY */
    --neutral-gray-100: #191919;
    --neutral-gray-200: #232323;
    --neutral-gray-300: #2e2e2e;
    --neutral-gray-400: #3a3a3a;
    --neutral-gray-500: #4d4d4d;
    --gray-600: #636363;
    --gray-700: #777777;
    --gray-800: #8c8c8c;
    --gray-900: #a0a0a0;
    --gray-1000: #ededed;
    /* BLUE */
    --blue-100: #051839;
    --blue-200: #022248;
    --blue-300: #002c5f;
    --blue-400: #023973;
    --blue-500: #0e4c91;
    --blue-600: #006abf;
    --blue-700: #2680ff;
    --blue-800: #65a1ff;
    --blue-900: #83c0ff;
    --blue-1000: #e2edf6;
    --blue-text: var(--blue-900);
    /* RED */
    --red-100: #310910;
    --red-200: #420b12;
    --red-300: #590914;
    --red-400: #6e0f1a;
    --red-500: #8c1a23;
    --red-600: #c60027;
    --red-700: #ef2f40;
    --red-800: #ff6a65;
    --red-900: #ff9a97;
    --red-1000: #fae5e8;
    --red-text: var(--red-900);
    /* AMBER */
    --amber-100: #261500;
    --amber-200: #341c01;
    --amber-300: #482300;
    --amber-400: #553100;
    --amber-500: #6d4201;
    --amber-600: #8e5d00;
    --amber-700: #b17a00;
    --amber-800: #e58800;
    --amber-900: #ffa238;
    --amber-1000: #f6ead0;
    --amber-text: var(--amber-900);
    /* GREEN */
    --green-100: #002107;
    --green-200: #002c0c;
    --green-300: #013915;
    --green-400: #024818;
    --green-500: #005e19;
    --green-600: #007f28;
    --green-700: #00a23a;
    --green-800: #47bd5e;
    --green-900: #34dd65;
    --green-1000: #d1f6dc;
    --green-text: var(--green-900);
    /* TEAL */
    --teal-100: #001f19;
    --teal-200: #012a23;
    --teal-300: #00372f;
    --teal-400: #08453a;
    --teal-500: #005a4f;
    --teal-600: #007a6b;
    --teal-700: #009c8a;
    --teal-800: #48b7a5;
    --teal-900: #2ad6c2;
    --teal-1000: #c6f7ed;
    --teal-text: var(--teal-900);
    /* PURPLE */
    --purple-100: #270a31;
    --purple-200: #331041;
    --purple-300: #421258;
    --purple-400: #511773;
    --purple-500: #672593;
    --purple-600: #8933c9;
    --purple-700: #a856eb;
    --purple-800: #bf7cff;
    --purple-900: #d6a0ff;
    --purple-1000: #f3e6f8;
    --purple-text: var(--purple-900);
    /* PINK */
    --pink-100: #2e0a1b;
    --pink-200: #400a24;
    --pink-300: #540c2f;
    --pink-400: #66163c;
    --pink-500: #861c4c;
    --pink-600: #be0e5a;
    --pink-700: #ec237e;
    --pink-800: #ff6293;
    --pink-900: #ff96b1;
    --pink-1000: #f9e5ee;
    --pink-text: var(--pink-900);
}

[data-theme="light"] {
    /* GRAY */
    --neutral-gray-100: #f3f3f3;
    --neutral-gray-200: #ececec;
    --neutral-gray-300: #e4e4e4;
    --neutral-gray-400: #d9d9d9;
    --neutral-gray-500: #c5c5c5;
    --gray-600: #a9a9a9;
    --gray-700: #8d8d8d;
    --gray-800: #717171;
    --gray-900: #4d4d4d;
    --gray-1000: #171717;
    /* BLUE */
    --blue-100: #f0f7ff;
    --blue-200: #e4eef9;
    --blue-300: #d6e5f5;
    --blue-400: #bfdaf1;
    --blue-500: #92c7f9;
    --blue-600: #4eabfc;
    --blue-700: #2880ff;
    --blue-800: #015fdd;
    --blue-900: #0046a5;
    --blue-1000: #022756;
    --blue-text: #0062e2;
    /* RED */
    --red-100: #fff2f4;
    --red-200: #fde7e8;
    --red-300: #f6dbdc;
    --red-400: #f2cbca;
    --red-500: #f4abac;
    --red-600: #ff7073;
    --red-700: #fa0034;
    --red-800: #c6001b;
    --red-900: #950012;
    --red-1000: #4f0913;
    --red-text: #d0001d;
    /* AMBER */
    --amber-100: #fef5e0;
    --amber-200: #f8edcd;
    --amber-300: #f0e2ba;
    --amber-400: #f4d279;
    --amber-500: #edb74c;
    --amber-600: #dd9300;
    --amber-700: #b17a00;
    --amber-800: #975800;
    --amber-900: #7a3700;
    --amber-1000: #4a1500;
    --amber-text: #a94e00;
    /* GREEN */
    --green-100: #eafbea;
    --green-200: #def4e0;
    --green-300: #c9efc7;
    --green-400: #ace8af;
    --green-500: #73dc7f;
    --green-600: #23c541;
    --green-700: #1aa140;
    --green-800: #047f2f;
    --green-900: #005e20;
    --green-1000: #003409;
    --green-text: #007c2c;
    /* TEAL */
    --teal-100: #defefa;
    --teal-200: #d5f6ee;
    --teal-300: #c1eee6;
    --teal-400: #a0e6db;
    --teal-500: #36ddc8;
    --teal-600: #00bfa5;
    --teal-700: #009c8b;
    --teal-800: #007a6c;
    --teal-900: #005a51;
    --teal-1000: #003129;
    --teal-text: #00776b;
    /* PURPLE */
    --purple-100: #faf2ff;
    --purple-200: #f2eaf7;
    --purple-300: #eaddf4;
    --purple-400: #e3ccf1;
    --purple-500: #dca8fe;
    --purple-600: #c77dff;
    --purple-700: #ae43ff;
    --purple-800: #8e1cd8;
    --purple-900: #6900ac;
    --purple-1000: #380d58;
    --purple-text: #9c00fc;
    /* PINK */
    --pink-100: #fff1f8;
    --pink-200: #fce7ef;
    --pink-300: #f8d9e4;
    --pink-400: #f3c9d5;
    --pink-500: #f2a8c1;
    --pink-600: #f177a0;
    --pink-700: #ed1f7e;
    --pink-800: #c0005a;
    --pink-900: #900044;
    --pink-1000: #4c0b28;
    --pink-text: #cf0064;
}