// This file contains reference level of our CSS tokens
// For more details see our RFC about CSS design tokens system
// https://docs.google.com/document/d/17zJHqSYj-epOMP0vcC-vPTA57O1ZxJqW6QVo5lKBl_Q/edit?usp=sharing

// Variable font implementation for PolySans
@font-face {
    font-family: 'PolySans';
    src:
        url('../../fonts/PolySans-variable.woff2')
            format('woff2 supports variations'),
        url('../../fonts/PolySans-variable.woff2') format('woff2-variations');
    font-weight: 100 900; /* Full range for variable font */
    font-stretch: 75% 125%; /* Using standard range */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PolySans';
    src:
        url('../../fonts/PolySansItalic-variable.woff2')
            format('woff2 supports variations'),
        url('../../fonts/PolySansItalic-variable.woff2')
            format('woff2-variations');
    font-weight: 100 900; /* Full range for variable font */
    font-stretch: 75% 125%; /* Using standard range */
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'PerfectlyNineties';
    src: url('../../fonts/PerfectlyNineties-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PerfectlyNineties';
    src: url('../../fonts/PerfectlyNineties-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

// Color values are based on Harmony palette
// see https://www.figma.com/community/file/1287828769207775946/harmony-accessible-ui-color-palette
[data-sg-root] {
    // ------- Typography -------
    --sg-ref-font-family-sans: 'Inter Variable', sans-serif;
    --sg-ref-font-family-serif: 'PerfectlyNineties', serif;
    --sg-ref-font-family-monospace: 'Roboto Mono Variable', monospace;
    --sg-ref-font-family-brand: 'PolySans', sans-serif;

    // -------- BLUE --------
    --sg-ref-blue-1200: oklch(0.084 0.037 275);
    --sg-ref-blue-1100: oklch(0.162 0.07 271);
    --sg-ref-blue-1000: oklch(0.242 0.115 271);
    --sg-ref-blue-900: oklch(0.326 0.17 271);
    --sg-ref-blue-800: oklch(0.408 0.225 271);
    --sg-ref-blue-700: oklch(0.489 0.265 271);
    --sg-ref-blue-600: oklch(0.552 0.248 273);
    --sg-ref-blue-500: oklch(0.632 0.199 276);
    --sg-ref-blue-400: oklch(0.717 0.148 275);
    --sg-ref-blue-300: oklch(0.804 0.098 273);
    --sg-ref-blue-200: oklch(0.892 0.052 272);
    --sg-ref-blue-100: oklch(0.975 0.011 265);

    // -------- GREEN --------
    --sg-ref-green-1200: oklch(0.075 0.016 165);
    --sg-ref-green-1100: oklch(0.164 0.022 167);
    --sg-ref-green-1000: oklch(0.242 0.034 169);
    --sg-ref-green-900: oklch(0.327 0.052 169);
    --sg-ref-green-800: oklch(0.406 0.068 169);
    --sg-ref-green-700: oklch(0.49 0.081 169);
    --sg-ref-green-600: oklch(0.571 0.085 169);
    --sg-ref-green-500: oklch(0.653 0.08 170);
    --sg-ref-green-400: oklch(0.734 0.067 169);
    --sg-ref-green-300: oklch(0.816 0.051 169);
    --sg-ref-green-200: oklch(0.897 0.035 169);
    --sg-ref-green-100: oklch(0.979 0.021 171);

    // -------- GRAY --------
    --sg-ref-gray-1200: oklch(0.085 0 0);
    --sg-ref-gray-1100: oklch(0.164 0 0);
    --sg-ref-gray-1000: oklch(0.244 0 0);
    --sg-ref-gray-900: oklch(0.325 0 0);
    --sg-ref-gray-800: oklch(0.409 0 0);
    --sg-ref-gray-700: oklch(0.489 0 0);
    --sg-ref-gray-600: oklch(0.569 0 0);
    --sg-ref-gray-500: oklch(0.653 0 0);
    --sg-ref-gray-400: oklch(0.735 0 0);
    --sg-ref-gray-300: oklch(0.817 0 0);
    --sg-ref-gray-200: oklch(0.93 0 0);
    --sg-ref-gray-100: oklch(0.979 0 0);

    // -------- PINK --------
    --sg-ref-pink-1200: oklch(0.078 0.031 7);
    --sg-ref-pink-1100: oklch(0.162 0.056 8);
    --sg-ref-pink-1000: oklch(0.243 0.094 7);
    --sg-ref-pink-900: oklch(0.331 0.133 8);
    --sg-ref-pink-800: oklch(0.418 0.167 10);
    --sg-ref-pink-700: oklch(0.499 0.2 9);
    --sg-ref-pink-600: oklch(0.57 0.228 7);
    --sg-ref-pink-500: oklch(0.653 0.216 7);
    --sg-ref-pink-400: oklch(0.726 0.178 6);
    --sg-ref-pink-300: oklch(0.803 0.118 5);
    --sg-ref-pink-200: oklch(0.888 0.061 6);
    --sg-ref-pink-100: oklch(0.972 0.015 2);

    // -------- TEAL --------
    --sg-ref-teal-1200: oklch(0.08 0.017 234);
    --sg-ref-teal-1100: oklch(0.165 0.031 223);
    --sg-ref-teal-1000: oklch(0.247 0.048 228);
    --sg-ref-teal-900: oklch(0.332 0.064 227);
    --sg-ref-teal-800: oklch(0.413 0.08 228);
    --sg-ref-teal-700: oklch(0.496 0.096 227);
    --sg-ref-teal-600: oklch(0.578 0.111 227);
    --sg-ref-teal-500: oklch(0.656 0.123 224);
    --sg-ref-teal-400: oklch(0.734 0.108 222);
    --sg-ref-teal-300: oklch(0.815 0.082 222);
    --sg-ref-teal-200: oklch(0.897 0.055 223);
    --sg-ref-teal-100: oklch(0.979 0.019 209);

    // -------- VERMILION --------
    --sg-ref-vermilion-1200: oklch(0.077 0.031 29);
    --sg-ref-vermilion-1100: oklch(0.162 0.054 29);
    --sg-ref-vermilion-1000: oklch(0.243 0.089 29);
    --sg-ref-vermilion-900: oklch(0.325 0.13 29);
    --sg-ref-vermilion-800: oklch(0.41 0.168 29);
    --sg-ref-vermilion-700: oklch(0.491 0.202 29);
    --sg-ref-vermilion-600: oklch(0.572 0.215 29);
    --sg-ref-vermilion-500: oklch(0.653 0.204 29);
    --sg-ref-vermilion-400: oklch(0.728 0.168 29);
    --sg-ref-vermilion-300: oklch(0.802 0.114 30);
    --sg-ref-vermilion-200: oklch(0.889 0.059 31);
    --sg-ref-vermilion-100: oklch(0.973 0.014 34);

    // -------- VIOLET --------
    --sg-ref-violet-1200: oklch(0.084 0.025 306);
    --sg-ref-violet-1100: oklch(0.162 0.052 301);
    --sg-ref-violet-1000: oklch(0.245 0.087 302);
    --sg-ref-violet-900: oklch(0.325 0.129 303);
    --sg-ref-violet-800: oklch(0.407 0.17 303);
    --sg-ref-violet-700: oklch(0.489 0.2 302);
    --sg-ref-violet-600: oklch(0.57 0.212 302);
    --sg-ref-violet-500: oklch(0.654 0.2 302);
    --sg-ref-violet-400: oklch(0.734 0.167 303);
    --sg-ref-violet-300: oklch(0.812 0.118 305);
    --sg-ref-violet-200: oklch(0.894 0.064 305);
    --sg-ref-violet-100: oklch(0.975 0.016 310);

    // -------- RED --------
    --sg-ref-red-1200: oklch(0.078 0.031 7);
    --sg-ref-red-1100: oklch(0.162 0.056 8);
    --sg-ref-red-1000: oklch(0.243 0.094 7);
    --sg-ref-red-900: oklch(0.331 0.133 8);
    --sg-ref-red-800: oklch(0.418 0.167 10);
    --sg-ref-red-700: oklch(0.499 0.2 9);
    --sg-ref-red-600: oklch(0.57 0.228 7);
    --sg-ref-red-500: oklch(0.653 0.216 7);
    --sg-ref-red-400: oklch(0.726 0.178 6);
    --sg-ref-red-300: oklch(0.803 0.118 5);
    --sg-ref-red-200: oklch(0.888 0.061 6);
    --sg-ref-red-100: oklch(0.972 0.015 2);

    // -------- ORANGE --------
    --sg-ref-orange-1200: oklch(0.077 0.031 29);
    --sg-ref-orange-1100: oklch(0.162 0.054 29);
    --sg-ref-orange-1000: oklch(0.243 0.089 29);
    --sg-ref-orange-900: oklch(0.325 0.13 29);
    --sg-ref-orange-800: oklch(0.41 0.168 29);
    --sg-ref-orange-700: oklch(0.491 0.202 29);
    --sg-ref-orange-600: oklch(0.572 0.215 29);
    --sg-ref-orange-500: oklch(0.653 0.204 29);
    --sg-ref-orange-400: oklch(0.728 0.168 29);
    --sg-ref-orange-300: oklch(0.802 0.114 30);
    --sg-ref-orange-200: oklch(0.889 0.059 31);
    --sg-ref-orange-100: oklch(0.973 0.014 34);
}