@import 'color-variables/rootVariables.css';
@import 'components-colors/inputVariables.css';
@import 'color-variables/defaultTokens.css';
@import 'color-variables/fretexTokens.css';
@import 'color-variables/jadeTokens.css';
@import 'typographyTokens.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    /*
     * Native Popover API elements (our top-layer overlays: StyledPopover / StyledSelect /
     * StyledSelectAutocomplete, and thus StyledMenu + the date-picker calendar) ship UA-default
     * chrome — a solid border, 0.25em padding, `inset: 0` + `margin: auto`. Neutralise it so each
     * component controls its own look (otherwise a popover that doesn't set a border shows the black
     * UA outline — e.g. the calendar). `:where()` keeps 0 specificity, so any component class
     * (border-delta-300, py-1, …) or inline style still wins. Prevents this class of regression for
     * every current and future top-layer popover.
     */
    :where([popover]) {
        margin: 0;
        inset: auto;
        border: 0;
        padding: 0;
        background: transparent;
    }
}

/*
 * Respect OS-level "reduce motion" (WCAG 2.3.3) across every component in one place instead of
 * gating each `transition-*`/`animate-*` Tailwind class individually. Left unlayered (not
 * `@tailwind utilities`) with `!important` — the standard technique for this rule (e.g. web.dev's
 * "one rule to reduce motion") — so it wins over any Tailwind transition/animation/duration utility
 * regardless of that utility's own layer/specificity. Near-zero (not `0s`/`none`) keeps
 * `transitionend`/`animationend` still firing for any code awaiting them.
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@layer utilities {
    .border-solid {
        border-style: solid;
    }

    .border-r-solid {
        border-right-style: solid;
    }

    .border-l-solid {
        border-left-style: solid;
    }

    .border-b-solid {
        border-bottom-style: solid;
    }

    .border-t-solid {
        border-top-style: solid;
    }

    .border-y-solid {
        border-top-style: solid;
        border-bottom-style: solid;
    }

    .absolute-center {
        @apply absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2;
    }

    .noselect {
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
    }

    .allselect {
        -webkit-touch-callout: all; /* iOS Safari */
        -webkit-user-select: all; /* Safari */
        -khtml-user-select: all; /* Konqueror HTML */
        -moz-user-select: all; /* Old versions of Firefox */
        -ms-user-select: all; /* Internet Explorer/Edge */
        user-select: all; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
    }

    .overflow-wrap-anywhere {
        word-break: break-word !important; /* Chrome, Safari */
        overflow-wrap: anywhere !important; /* Firefox */
    }

    .overflow-scroll::-webkit-scrollbar {
        display: none;
    }

    /*  @font-face {
        font-family: 'Roboto';
        src: url('./fonts/roboto/Roboto-Regular.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
    }

   
    @font-face {
        font-family: 'Roboto';
        src: url('./fonts/roboto/Roboto-Bold.ttf') format('truetype');
        font-weight: 700;
        font-style: normal;
    }

    
    @font-face {
        font-family: 'Roboto';
        src: url('./fonts/roboto/Roboto-BoldItalic.ttf') format('truetype');
        font-weight: 700;
        font-style: italic;
    }

   
    @font-face {
        font-family: 'Roboto';
        src: url('./fonts/roboto/Roboto-Black.ttf') format('truetype');
        font-weight: 900;
        font-style: normal;
    }

    
    @font-face {
        font-family: 'Roboto';
        src: url('./fonts/roboto/Roboto-BlackItalic.ttf') format('truetype');
        font-weight: 900;
        font-style: italic;
    }

   
    @font-face {
        font-family: 'Roboto';
        src: url('./fonts/roboto/Roboto-Light.ttf') format('truetype');
        font-weight: 300;
        font-style: normal;
    }

   
    @font-face {
        font-family: 'Roboto';
        src: url('./fonts/roboto/Roboto-LightItalic.ttf') format('truetype');
        font-weight: 300;
        font-style: italic;
    }

    
    @font-face {
        font-family: 'Roboto';
        src: url('./fonts/roboto/Roboto-Medium.ttf') format('truetype');
        font-weight: 500;
        font-style: normal;
    }

    
    @font-face {
        font-family: 'Roboto';
        src: url('./fonts/roboto/Roboto-MediumItalic.ttf') format('truetype');
        font-weight: 500;
        font-style: italic;
    }

   
    @font-face {
        font-family: 'Roboto';
        src: url('./fonts/roboto/Roboto-Thin.ttf') format('truetype');
        font-weight: 100;
        font-style: normal;
    }

   
    @font-face {
        font-family: 'Roboto';
        src: url('./fonts/roboto/Roboto-ThinItalic.ttf') format('truetype');
        font-weight: 100;
        font-style: italic;
    }

   
    @font-face {
        font-family: 'Roboto';
        src: url('./fonts/roboto/Roboto-Italic.ttf') format('truetype');
        font-weight: 400;
        font-style: italic;
    } */
}