/* ===========================================================
   style.css
   CSS Reset (Reboot) and Basic Styling
   =========================================================== */

/* -----------------------------------------------------------
   Reset and Box Sizing
   ----------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

/* -----------------------------------------------------------
   Base HTML & Body Styles
   ----------------------------------------------------------- */
html {
    font-size: 100%; /* 16px base */
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family-base);
    line-height: var(--leading-normal);
    background-color: var(--color-bg);
    color: var(--color-text);
    min-height: 100vh;
    text-rendering: optimizeLegibility;
    margin: 0;
    padding: 0;
}

[v-cloak] {
    display: none;
}

/* -----------------------------------------------------------
   Typography
   ----------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-tight);
    margin-bottom: var(--spacing-2);
    color: var(--color-text);
}

h1 {
    font-size: var(--text-3xl);
}

h2 {
    font-size: var(--text-2xl);
}

h3 {
    font-size: var(--text-xl);
}

h4 {
    font-size: var(--text-lg);
}

h5 {
    font-size: var(--text-base);
}

h6 {
    font-size: var(--text-base);
}

p {
    margin-bottom: 1em;
}

/* -----------------------------------------------------------
   Links
   ----------------------------------------------------------- */
a {
    color: var(--primary-light);
    text-decoration: none;
    transition: color var(--transition-fast);
}

    a:hover,
    a:focus {
        color: var(--primary);
        text-decoration: underline;
    }


/* -----------------------------------------------------------
   Forms
   ----------------------------------------------------------- */
input,
textarea,
select {
    font-family: var(--font-family-base);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    padding: var(--spacing-3) var(--spacing-4);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-elevated);
    color: var(--color-text);
    outline: none;
    transition: all var(--transition-base);
}

    input:focus,
    textarea:focus,
    select:focus {
        border-color: var(--color-border-focus);
        box-shadow: 0 0 0 3px rgba(16, 169, 225, 0.1);
    }

input.only-uppercase {
  text-transform: uppercase;
}

input.only-uppercase::placeholder {
  text-transform: none;
}

/* Remove browser default up/down arrows on numeric inputs */
/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}


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

/* -----------------------------------------------------------
   Tables
   ----------------------------------------------------------- */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--spacing-4);
    background: var(--color-bg-elevated);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

th,
td {
    padding: var(--spacing-3) var(--spacing-4);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

th {
    background: var(--color-bg-secondary);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

tr:last-child td {
    border-bottom: none;
}

table select, table input, table textarea {
    width: 100%;
    max-width: 300px;
}

figure {
    margin: 0;
}