/* CSS Variables */
:root {
    /* Font-related variables */
    --font-family-sans-serif: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-family-monospace: monospace, monospace;
    --font-size-base: 100%;
    --font-size-large: 2em;
    --font-size-small: 75%;
    --font-size-code: 1em;
    --font-weight-bold: bolder;
    /* Line height */
    --line-height: 1.15;
    --line-height-body: 1.5;
    /* Color-related variables */
    --color-inherit: inherit;
    --color-transparent: transparent;
    --color-current: currentColor;
    /* Border and spacing-related variables */
    --border-width: 1px;
    --spacing-small: 1px;
    --spacing-medium: 6px;
    --spacing-large: 1rem;
    --spacing-base: 0;
    --spacing-form: 2px;
    /* Box-sizing and Layout */
    --box-sizing: border-box;
    --box-sizing-content: content-box;
    --height-full: 100%;
    --min-height-full: 100vh;
    /* Overflow */
    --overflow-visible: visible;
    --overflow-auto: auto;
    --overflow-hidden: hidden;
    --overflow-initial: initial;
    /* Display */
    --display-initial: initial;
    --visibility-initial: initial;
    /* Pointer Events */
    --pointer-events-interact-non-ui-default: none;
    --pointer-events-interact-ui-default: all;
    --pointer-events-interact-ui: var(--pointer-events-interact-ui-default);
    --pointer-events-interact-non-ui: var(--pointer-events-interact-non-ui-default);
    /* Text-rendering */
    --text-rendering: optimizeSpeed;
    --font-smoothing: antialiased;
    /* User Select */
    --user-select-none: none;
    --user-select-text: text;
    /* Touch actions */
    --touch-action-all: all;

    --display: var(--display-initial);
    --visibility: var(--visibility-initial);
}

/* Global reset */
*, *::before, *::after {
    box-sizing: var(--box-sizing);
    margin: var(--spacing-base);
    padding: var(--spacing-base);
}

/* Prevent selection and pointer events on non-user elements */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, legend, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, time, mark, button {
    user-select: var(--user-select-none);
    pointer-events: var(--pointer-events-interact-non-ui);
    touch-action: var(--touch-action-all);
}

/* Enable user-interactive elements by default */
input, textarea, select, option, optgroup, label, a, summary {
    user-select: var(--user-select-text);
    pointer-events: var(--pointer-events-interact-ui);
    touch-action: var(--touch-action-all);
}

.no-interaction {
    --pointer-events-interact-ui: none;
    --pointer-events-interact-non-ui: none;
}

.interact-ui {
    --pointer-events-interact-ui: all;
    --pointer-events-interact-non-ui: all;
}

.interact-all {
    --pointer-events-interact-ui: all;
    --pointer-events-interact-non-ui: all;
}

/* Ensure text fields behave naturally */
textarea, input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], input[type="tel"], input[type="number"] {
    user-select: var(--user-select-text) !important;
    pointer-events: var(--pointer-events-interact-ui) !important;
}

/* HTML */
html {
    height: var(--height-full);
    width: var(--height-full);
    line-height: var(--line-height);
    font-family: var(--font-family-sans-serif);
}

/* Body */
body {
    height: var(--height-full);
    min-height: var(--min-height-full);
    line-height: var(--line-height-body);
    font-family: var(--font-family-sans-serif);
    text-rendering: var(--text-rendering);
    -webkit-font-smoothing: var(--font-smoothing);
    overflow-wrap: break-word;
    overflow: var(--overflow-auto);
}

/* Block elements */
main {
    display: block;
}

/* Headings */
h1 {
    font-size: var(--font-size-large);
    margin: 0.67em 0;
}

/* Lists */
ul, ol {
    list-style: none;
}

/* Anchor */
a {
    text-decoration: none;
    color: var(--color-inherit);
}

/* Subscript and superscript */
sub, sup {
    font-size: var(--font-size-small);
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* Buttons and Inputs */
button, input, select, textarea {
    font: inherit;
    color: inherit;
    border: var(--border-width) solid var(--color-current);
    background: transparent;
    outline: none;
    transition: border-color 0.2s ease;
}

button:focus, input:focus, select:focus, textarea:focus {
    border-color: #007bff;
    outline: none;
}

/* Buttons */
button {
    overflow: var(--overflow-visible);
    -webkit-appearance: button;
    padding: var(--spacing-small) var(--spacing-medium);
}

[type="button"], [type="reset"], [type="submit"], button {
    -webkit-appearance: button;
    padding: var(--spacing-small) var(--spacing-medium);
}

input, textarea {
    padding: var(--spacing-small);
}

/* Images */
img {
    max-width: 100%;
    height: auto;
}

/* Details */
details {
    display: block;
}

/* Hidden Elements */
[hidden] {
    display: none;
}

/* Table reset */
table {
    border-collapse: collapse;
    border-spacing: 0;
    text-indent: var(--spacing-base);
    border-color: var(--color-current);
}

/* Horizontal Rule reset */
hr {
    box-sizing: content-box;
    height: 0;
    color: var(--color-inherit);
    overflow: var(--overflow-visible);
}

/* Prevent textareas from being too small */
textarea {
    resize: vertical;
}

/* Motion reduction for accessibility */
@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;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* Responsive Layout */
@media (max-width: 1200px) {
    body {
        font-size: 95%;
    }

    h1 {
        font-size: 1.8em;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 90%;
    }

    h1 {
        font-size: 1.5em;
    }

    button {
        padding: var(--spacing-small);
    }

    input, textarea {
        width: 100%;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 85%;
    }

    h1 {
        font-size: 1.2em;
    }

    button {
        padding: var(--spacing-small) var(--spacing-large);
    }

    input, textarea {
        width: 100%;
    }
}

/* Apply default styling class */
.apply-default-styling {
    all: initial;
    color: var(--color-inherit);
    background: var(--color-inherit);
    visibility: unset;
    display: var(--display-initial);
    overflow: var(--overflow-initial);
    box-sizing: var(--box-sizing-content);
    padding: unset;
    margin: unset;
}