/*
  Primitives (visual direction › Color › Primitives). The only file where color literals may appear.
  Only semantic.css and brands.css may reference these. Tailwind v3 values. Neutrals are Stone (#24);
  stone-450 is off-scale: the midpoint of 400 and 500, for control borders at 3:1.
*/
:root {
    --white: #FFFFFF;
    --black: #000000;

    --stone-50: #FAFAF9;
    --stone-100: #F5F5F4;
    --stone-200: #E7E5E4;
    --stone-300: #D6D3D1;
    --stone-400: #A8A29E;
    --stone-450: #908A85;
    --stone-500: #78716C;
    --stone-600: #57534E;
    --stone-700: #44403C;
    --stone-800: #292524;
    --stone-900: #1C1917;
    --stone-950: #0C0A09;

    --stone-900-a4: #1C19170A;
    --stone-900-a8: #1C191714;
    --stone-900-a12: #1C19171F;
    --stone-50-a6: #FAFAF90F;
    --stone-50-a10: #FAFAF91A;
    --black-a40: #00000066;
    --black-a60: #00000099;

    --orange-50: #FFF7ED;
    --orange-100: #FFEDD5;
    --orange-200: #FED7AA;
    --orange-300: #FDBA74;
    --orange-400: #FB923C;
    --orange-500: #F97316;
    --orange-600: #EA580C;
    --orange-700: #C2410C;
    --orange-800: #9A3412;
    --orange-900: #7C2D12;
    --orange-950: #431407;

    --teal-50: #F0FDFA;
    --teal-100: #CCFBF1;
    --teal-200: #99F6E4;
    --teal-300: #5EEAD4;
    --teal-400: #2DD4BF;
    --teal-500: #14B8A6;
    --teal-600: #0D9488;
    --teal-700: #0F766E;
    --teal-800: #115E59;
    --teal-900: #134E4A;
    --teal-950: #042F2E;

    --red-50: #FEF2F2;
    --red-400: #F87171;
    --red-700: #B91C1C;
    --red-950: #450A0A;
    --amber-50: #FFFBEB;
    --amber-400: #FBBF24;
    --amber-700: #B45309;
    --amber-950: #451A03;
    --green-50: #F0FDF4;
    --green-400: #4ADE80;
    --green-700: #15803D;
    --green-950: #052E16;
}