@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;
    }
}

/*
 * ASMA-8210 (TB-02) — touch-readiness primitives for the Ad Voca mobile TabBar/Menu work.
 *
 * Four opt-in utilities. Every one of them is inert until a finger or a mouse button is on the
 * control, or until the viewport is mobile, so no resting style changes anywhere: the frozen
 * barrel (`api-surface.test.ts`) and the VRT baselines — captured at 1280x720 with a fine
 * pointer — are untouched by design, not by luck. They reach consumers through `dist/style.css`,
 * the same route as `.noselect` and `.absolute-center`, so no new export is needed to use them.
 *
 * Deliberately UNLAYERED (like the reduced-motion block above), not in `@layer utilities`:
 * `tailwind.config.ts` sets `important: true`, and Tailwind v3 importantifies custom utilities
 * inside `@layer utilities` too. That would turn `.asma-hit-area`'s `position: relative` into
 * `!important`, making it unoverridable by Tailwind position utilities and by inline styles.
 * Unlayered, these rules still sit after the `@tailwind utilities` output in source order, so
 * the one `!important` we do want (`.asma-touch-target`, below) keeps beating `min-h-*`.
 *
 * Pick per control:
 *   .asma-touch-ready   control that already has a designed `:active` (Button, Chip, Switch).
 *   .asma-pressable     control with no pressed state at all (Tab, MenuItem, Link).
 *   .asma-hit-area      isolated control that must reach 44px without growing.
 *   .asma-touch-target  row in a stack, where growing on a phone is the honest fix.
 *
 * Sizes come from `--asma-touch-target-size` (44px, Apple HIG / WCAG 2.5.5 AAA; WCAG 2.5.8 AA
 * asks only 24px, so this is the stricter of the two) and `--asma-pressed-opacity`. Both are
 * plain custom properties: a component or a consumer retunes them without a new class.
 */

/*
 * Kills the grey iOS/Android tap flash and the 300ms double-tap-zoom delay that `touch-action:
 * auto` implies. Both behaviours exist only for touch input, so a mouse or trackpad renders and
 * behaves exactly as it did before.
 */
.asma-touch-ready,
.asma-pressable {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/*
 * The replacement for the tap flash removed above — without it, touch would end up with *less*
 * feedback than before. Opacity is background-agnostic (filled, outlined and bare controls all
 * read the same) and layout-neutral, so it never reflows and never reaches a VRT baseline.
 * Disabled controls stay inert, matching their `onClick` being detached.
 */
.asma-pressable:active:not(:disabled):not([aria-disabled='true']) {
    opacity: var(--asma-pressed-opacity, 0.7);
}

/*
 * A 44px pointer target on a control that must keep its drawn size: a transparent, centred
 * overlay that belongs to the control, so a press anywhere inside it activates the control
 * itself. `width/height: 100%` keeps it at least as large as the control it sits on.
 *
 * The supplied `position: relative` carries no `!important` (see the unlayered note above), so
 * an inline `style` always overrides it, and a Tailwind position utility (importantified by
 * `important: true`) does too.
 *
 * Caveats, all of them reasons to reach for `.asma-touch-target` instead:
 *   - it is NOT mobile-gated: the enlarged pointer target applies to desktop mouse users too
 *     (harmless for isolated controls, surprising next to other clickable things);
 *   - it owns the element's `::after`, clobbering any decorative `::after` the control has;
 *   - an ancestor `overflow: hidden` clips it, and a scroll container counts it as overflow;
 *   - it covers nested interactive children, and neighbours closer together than 44px would
 *     overlap and steal each other's presses.
 */
.asma-hit-area {
    position: relative;
}

.asma-hit-area::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    min-width: var(--asma-touch-target-size, 44px);
    min-height: var(--asma-touch-target-size, 44px);
    transform: translate(-50%, -50%);
}

/*
 * 44px tall rows in a stack, where overlapping hit areas would fight and growing is what the
 * design actually wants. Gated to the mobile breakpoint (`_breakpoints.scss` `$mobile-max`) so
 * tablet and desktop — including every VRT baseline — stay byte-identical. `!important` is
 * required to outrank Tailwind's own `min-h-*`, which `important: true` emits with `!`.
 *
 * This is a LATER-SOURCE OVERRIDE, not a CSS `max()` floor — it replaces whatever `min-height`
 * the component declares, it cannot clamp against it. Two consequences (ASMA-8210 review B1):
 *   - Only apply it where the EFFECTIVE min-height is below 44px — effective, not the class you
 *     can see: stacked utilities resolve by emitted order, so verify with computed style. On a
 *     component resting at `min-h-12` (48px) this rule would SHRINK the target — that is why
 *     StyledTab takes only `asma-pressable` (both tab variants effectively rest at 48px; even
 *     the small one, whose `min-h-10` loses to the base `min-h-12` by source order).
 *   - It deliberately sets no `min-width`: a width override would replace designed minimums
 *     like the tab's `min-w-[90px]` with 44px. Width floors stay per-component.
 */
@media (max-width: 743px) {
    .asma-touch-target {
        min-height: var(--asma-touch-target-size, 44px) !important;
    }
}

@layer utilities {
    .flip-180 {
        transform: rotate(180deg);
    }

    .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;
    } */
}