/**
 * =========================================================
 * FEX CORE RESET
 * FancyEmoji Unicode Framework
 *
 * Version: 1.0.0
 * =========================================================
 *
 * Global CSS reset for the entire FEX framework.
 *
 * IMPORTANT:
 * - Load AFTER variables.css
 * - Load BEFORE base.css
 * - No page-specific styles
 * - No component-specific styles
 * =========================================================
 */


/* =========================================================
   BOX SIZING
   ========================================================= */

*,
*::before,
*::after {

    box-sizing:
        border-box;

}


/* =========================================================
   DOCUMENT
   ========================================================= */

html {

    margin:
        0;

    padding:
        0;

    min-height:
        100%;

    scroll-behavior:
        smooth;

    -webkit-text-size-adjust:
        100%;

    text-size-adjust:
        100%;

}


/* =========================================================
   BODY
   ========================================================= */

body {

    margin:
        0;

    padding:
        0;

    min-height:
        100%;

}


/* =========================================================
   ROOT ELEMENT
   ========================================================= */

#fex-app {

    min-height:
        100vh;

}


/* =========================================================
   TYPOGRAPHY ELEMENTS
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
p {

    margin:
        0;

    padding:
        0;

}


/* =========================================================
   LISTS
   ========================================================= */

ul,
ol {

    margin:
        0;

    padding:
        0;

}


/* =========================================================
   DEFAULT LIST STYLE
   ========================================================= */

ul,
ol {

    list-style:
        none;

}


/* =========================================================
   LINKS
   ========================================================= */

a {

    color:
        inherit;

    text-decoration:
        none;

}


/* =========================================================
   BUTTON
   ========================================================= */

button,
input,
textarea,
select {

    margin:
        0;

    font:
        inherit;

}


/* =========================================================
   BUTTON RESET
   ========================================================= */

button {

    border:
        0;

    padding:
        0;

    background:
        none;

    color:
        inherit;

    cursor:
        pointer;

}


/* =========================================================
   BUTTON DISABLED
   ========================================================= */

button:disabled {

    cursor:
        not-allowed;

}


/* =========================================================
   FORM CONTROLS
   ========================================================= */

input,
textarea,
select {

    color:
        inherit;

}


/* =========================================================
   TEXTAREA
   ========================================================= */

textarea {

    resize:
        vertical;

}


/* =========================================================
   FIELDSET
   ========================================================= */

fieldset {

    margin:
        0;

    padding:
        0;

    border:
        0;

}


/* =========================================================
   LEGEND
   ========================================================= */

legend {

    padding:
        0;

}


/* =========================================================
   IMAGES
   ========================================================= */

img,
picture,
svg,
canvas {

    display:
        block;

}


/* =========================================================
   IMAGE RESPONSIVENESS
   ========================================================= */

img,
picture {

    max-width:
        100%;

}


/* =========================================================
   SVG
   ========================================================= */

svg {

    max-width:
        100%;

}


/* =========================================================
   TABLE
   ========================================================= */

table {

    border-collapse:
        collapse;

    border-spacing:
        0;

}


/* =========================================================
   VIDEO / AUDIO
   ========================================================= */

video,
audio {

    display:
        block;

    max-width:
        100%;

}


/* =========================================================
   HR
   ========================================================= */

hr {

    margin:
        0;

    border:
        0;

    border-top:
        var(--fex-border-width)
        solid
        var(--fex-color-border);

}


/* =========================================================
   PRE / CODE
   ========================================================= */

pre,
code,
kbd,
samp {

    font-family:
        var(--fex-font-family-mono);

}


/* =========================================================
   PRE
   ========================================================= */

pre {

    margin:
        0;

    overflow:
        auto;

}


/* =========================================================
   BLOCKQUOTE
   ========================================================= */

blockquote {

    margin:
        0;

}


/* =========================================================
   QUOTE
   ========================================================= */

q {

    quotes:
        none;

}


/* =========================================================
   ABBREVIATION
   ========================================================= */

abbr[title] {

    text-decoration:
        underline;

    text-decoration-style:
        dotted;

    cursor:
        help;

}


/* =========================================================
   ADDRESS
   ========================================================= */

address {

    font-style:
        normal;

}


/* =========================================================
   SUB / SUP
   ========================================================= */

sub,
sup {

    position:
        relative;

    font-size:
        75%;

    line-height:
        0;

    vertical-align:
        baseline;

}

sup {

    top:
        -0.5em;

}

sub {

    bottom:
        -0.25em;

}


/* =========================================================
   HIDDEN ATTRIBUTE
   ========================================================= */

[hidden] {

    display:
        none
        !important;

}


/* =========================================================
   FOCUS
   ========================================================= */

:focus {

    outline:
        none;

}


/* =========================================================
   ACCESSIBLE KEYBOARD FOCUS
   ========================================================= */

:focus-visible {

    outline:
        var(--fex-border-width-strong)
        solid
        var(--fex-focus-border);

    outline-offset:
        2px;

}


/* =========================================================
   SELECTION
   ========================================================= */

::selection {

    background:
        var(--fex-color-primary);

    color:
        var(--fex-color-primary-contrast);

}


/* =========================================================
   PLACEHOLDER
   ========================================================= */

::placeholder {

    color:
        var(--fex-color-text-soft);

    opacity:
        1;

}


/* =========================================================
   SEARCH INPUT
   ========================================================= */

input[type="search"] {

    appearance:
        none;

    -webkit-appearance:
        none;

}


/* =========================================================
   NUMBER INPUT
   ========================================================= */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {

    margin:
        0;

}


/* =========================================================
   FILE INPUT
   ========================================================= */

input[type="file"] {

    cursor:
        pointer;

}


/* =========================================================
   CHECKBOX / RADIO
   ========================================================= */

input[type="checkbox"],
input[type="radio"] {

    accent-color:
        var(--fex-color-primary);

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior:
            auto;

    }


    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms
            !important;

        animation-iteration-count:
            1
            !important;

        transition-duration:
            0.01ms
            !important;

        scroll-behavior:
            auto
            !important;

    }

}


/* =========================================================
   END FEX CORE RESET
   ========================================================= */