@import './preflight.css';

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@import './components/koenig-lexical';
@import './components/kg-prose';
@import './components/simplemde';
@import './components/react-colorful';

/* Global Koenig content styles
/* -------------------------------------------------------------------- */

.koenig-lexical {
    --white: #FFF;

    --grey-50: #FAFAFB;
    --grey-100: #F4F5F6;
    --grey-200: #EBEEF0;
    --grey-300: #DDE1E5;
    --grey-400: #CED4D9;
    --grey-500: #AEB7C1;
    --grey-600: #95A1AD;
    --grey-700: #7C8B9A;
    --grey-800: #626D79;
    --grey-900: #394047;
    --grey-950: #23292F;

    --black: #15171A;

    --green: #30CF43;

    --kg-breakout-adjustment-with-fallback: var(--kg-breakout-adjustment, 0px);

    /*
        Tailwind v4 "translate" classes use `translate` rather than `transform`,
        if Koenig renders inside a TW v4 app we get doubled positioning through
        transform+translate. Reset `translate` for the .koenig-lexical classes.
    */

    .-translate-x-1\/2 {
        translate: none;
    }

    .-translate-y-2 {
        translate: none;
    }

    .-translate-y-full {
        translate: none;
    }
}
