@use 'sass:color';

@mixin animation {
    --acceleration-curve: cubic-bezier(0.4, 0, 1, 1);
    --deceleration-curve: cubic-bezier(0, 0, 0.2, 1);
    --standard-curve: cubic-bezier(0.4, 0, 0.2, 1);
    --swift-out: cubic-bezier(0.55, 0, 0.1, 1);
}

@mixin color-light {
    --gray-25: #ffffff;
    --gray-50: #f7f8fc;
    --gray-100: #eceef4;
    --gray-200: #dee1ea;
    --gray-300: #c6cad5;
    --gray-400: #9da4b8;
    --gray-500: #848ca2;
    --gray-600: #606881;
    --gray-700: #3f475e;
    --gray-800: #2d3241;
    --gray-900: #1a1f2d;
    --gray-950: #090c19;

    --primary-25: #fcfcfc;
    --primary-50: #ebf2ff;
    --primary-100: #d7e5ff;
    --primary-200: #c4d8ff;
    --primary-300: #9dbdff;
    --primary-400: #77a2fc;
    --primary-500: #5285f8;
    --primary-600: #2258e5;
    --primary-700: #0935b1;
    --primary-800: #011e8c;
    --primary-900: #000f60;
    --primary-950: #000337;

    --danger-25: #fefbfa;
    --danger-50: #fff1f2;
    --danger-100: #ffe4e6;
    --danger-200: #ffccd3;
    --danger-300: #ffa1ac;
    --danger-400: #ff637e;
    --danger-500: #ff2054;
    --danger-600: #ec003e;
    --danger-700: #c70036;
    --danger-800: #a50035;
    --danger-900: #8b0836;
    --danger-950: #4d0218;

    --info-25: #f9fcff;
    --info-50: #eff6ff;
    --info-100: #dbeafe;
    --info-200: #bedbff;
    --info-300: #8dc5ff;
    --info-400: #52a2ff;
    --info-500: #297fff;
    --info-600: #165dfc;
    --info-700: #1048e6;
    --info-800: #163cb8;
    --info-900: #1b398e;
    --info-950: #162456;

    --success-25: #f6fbf1;
    --success-50: #eff9e6;
    --success-100: #dcf2c4;
    --success-200: #bee88f;
    --success-300: #97d858;
    --success-400: #6fc22f;
    --success-500: #52a91d;
    --success-600: #3f8c17;
    --success-700: #326e17;
    --success-800: #2a5717;
    --success-900: #234717;
    --success-950: #0f2708;

    --warning-25: #fdfcf8;
    --warning-50: #fffbeb;
    --warning-100: #fef3c6;
    --warning-200: #fee685;
    --warning-300: #ffd22f;
    --warning-400: #ffb902;
    --warning-500: #ff9717;
    --warning-600: #dd7500;
    --warning-700: #b55500;
    --warning-800: #934200;
    --warning-900: #793600;
    --warning-950: #451b00;
}

@mixin color-dark {
    --gray-25: #15171e;
    --gray-50: #1b1f27;
    --gray-100: #232732;
    --gray-200: #2d323e;
    --gray-300: #393f4f;
    --gray-400: #485064;
    --gray-500: #5b647e;
    --gray-600: #717c9a;
    --gray-700: #8f98b1;
    --gray-800: #a8b0c5;
    --gray-900: #bfc5d7;
    --gray-950: #d8dbe4;

    --primary-25: #23262c;
    --primary-50: #262c39;
    --primary-100: #2a3448;
    --primary-200: #303e5a;
    --primary-300: #36486e;
    --primary-400: #3e5585;
    --primary-500: #44619d;
    --primary-600: #4d6fb6;
    --primary-700: #5980d3;
    --primary-800: #6a96f5;
    --primary-900: #77a7ff;
    --primary-950: #85b8ff;

    --danger-25: #272325;
    --danger-50: #37272b;
    --danger-100: #452c30;
    --danger-200: #563237;
    --danger-300: #69393d;
    --danger-400: #7f4145;
    --danger-500: #94484c;
    --danger-600: #ab5155;
    --danger-700: #c65d64;
    --danger-800: #e66f7a;
    --danger-900: #fd7c8c;
    --danger-950: #ff8ba0;

    --info-25: #23262c;
    --info-50: #252c39;
    --info-100: #283447;
    --info-200: #2c3f59;
    --info-300: #2e4b6d;
    --info-400: #315884;
    --info-500: #33659b;
    --info-600: #3874b4;
    --info-700: #4285d1;
    --info-800: #539cf3;
    --info-900: #5dadff;
    --info-950: #6bbfff;

    --success-25: #21251c;
    --success-50: #282f22;
    --success-100: #2e3822;
    --success-200: #354325;
    --success-300: #3b5129;
    --success-400: #41612e;
    --success-500: #467033;
    --success-600: #4d8139;
    --success-700: #589541;
    --success-800: #69ae4f;
    --success-900: #74c25b;
    --success-950: #81d56a;

    --warning-25: #2b261a;
    --warning-50: #322b1b;
    --warning-100: #3c331e;
    --warning-200: #493c21;
    --warning-300: #574725;
    --warning-400: #68532a;
    --warning-500: #785e30;
    --warning-600: #8c6b35;
    --warning-700: #a47a3b;
    --warning-800: #c28f42;
    --warning-900: #d89e4a;
    --warning-950: #efae52;
}

@mixin defaults {
    --font-monospace: jetbrains-mono, monospace;
    --font-sans: inter-variable, sans-serif;
    --font-serif: serif;
    --radius: 12px;
    --radius-double: 24px;
    --radius-full: 9999px;
    --radius-half: 6px;

    --font-size-2xsmall: 12px;
    --line-height-2xsmall: 18px;
    --font-size-xsmall: 13px;
    --line-height-xsmall: 18px;
    --font-size-small: 14px;
    --line-height-small: 21px;
    --font-size-default: 15px;
    --line-height-default: 24px;
    --font-size-large: 16px;
    --line-height-large: 24px;
    --font-size-xlarge: 18px;
    --line-height-xlarge: 27px;

    --transition-default: 180ms var(--swift-out);

    --background: var(--gray-25);
    --foreground: var(--gray-700);
    --foreground-prominent: var(--gray-900);
    --foreground-secondary: var(--gray-500);
    --surface: var(--gray-25);
    --surface-loader: rgb(from var(--gray-25) r g b / .75);
    --surface-stroke: var(--gray-200);
    --surface-stroke-hover: var(--gray-300);
    --surface-stroke-out: rgb(from var(--gray-800) r g b / .1);
    --surface-stroke-out-hover: rgb(from var(--gray-900) r g b / .15);
    --surface-hover: var(--gray-50);
    --surface-active: var(--gray-100);
    --surface-disabled: var(--gray-100);

    --overlay: rgb(from var(--gray-950) r g b / .5);
    --overlay-secondary: rgb(from var(--gray-950) r g b / .15);
    --overlay-strong: rgb(from var(--gray-950) r g b / .9);
}

@mixin defaults-dark {
    --surface-stroke-out: rgb(from var(--gray-800) r g b / .15);
    --surface-stroke-out-hover: rgb(from var(--gray-900) r g b / .2);

    --overlay: rgb(0 0 0 / .6);
    --overlay-secondary: rgb(0 0 0 / .4);
    --overlay-strong: rgb(0 0 0 / .9);
}

@mixin shadow-light {
    --shadow-px: 0 1px 1px rgb(from var(--gray-800) r g b / 0.02);
    --shadow-xs: 0 1px 2px 0 rgb(from var(--gray-800) r g b / 0.02);
    --shadow-sm: 0 1px 3px rgb(from var(--gray-800) r g b / 0.05), 0 1px 2px -1px rgb(from var(--gray-800) r g b / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(from var(--gray-800) r g b / 0.05), 0 2px 4px -2px rgb(from var(--gray-800) r g b / 0.05);
    --shadow-lg: 0 10px 15px -3px rgb(from var(--gray-800) r g b / 0.05), 0 4px 6px -4px rgb(from var(--gray-800) r g b / 0.05);
    --shadow-xl: 0 20px 25px -5px rgb(from var(--gray-800) r g b / 0.05), 0 8px 10px -6px rgb(from var(--gray-800) r g b / 0.05);
    --shadow-2xl: 0 25px 50px -12px rgb(from var(--gray-800) r g b / 0.12);
}

@mixin shadow-dark {
    --shadow-px: 0 1px 1px rgb(0 0 0 / 0.1);
    --shadow-xs: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    --shadow-sm: 0 1px 5px rgb(0 0 0 / 0.15), 0 1px 3px -1px rgb(0 0 0 / 0.15);
    --shadow-md: 0 4px 9px -1px rgb(0 0 0 / 0.15), 0 2px 6px -2px rgb(0 0 0 / 0.15);
    --shadow-lg: 0 10px 22px -3px rgb(0 0 0 / 0.15), 0 4px 9px -4px rgb(0 0 0 / 0.15);
    --shadow-xl: 0 20px 36px -5px rgb(0 0 0 / 0.15), 0 8px 15px -6px rgb(0 0 0 / 0.15);
    --shadow-2xl: 0 25px 72px -12px rgb(0 0 0 / 0.25);
}