/* ==========================================================================
   COPENHAGEN SOLUTIONS - MODERN CSS RESET & GLOBAL BASE STYLES
   ========================================================================== */

/* 1. Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 2. Prevent font size inflation and remove default margins */
html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    scroll-behavior: smooth;
    height: 100%;
    overflow-x: hidden;
}

body,
h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
    margin: 0;
    padding: 0;
}

/* 3. Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
    list-style: none;
}

/* 4. Set core body defaults */
body {
    min-height: 100%;
    text-rendering: optimizeSpeed;
    line-height: var(--line-height-body-md);
    background-color: var(--color-background);
    color: var(--color-text-main);
    font-family: var(--font-sans);
    font-size: var(--font-size-body-md);
    font-weight: var(--weight-body-md);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 5. A elements that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

/* Make images easier to work with */
img,
picture {
    max-width: 100%;
    display: block;
    height: auto;
}

/* Avoid text-shadows on templates that are editable */
[contenteditable] {
    outline: none;
}

/* ♿ Accessible Focus States */
:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

/* 🎨 Selection Highlight */
::selection {
    background-color: rgba(197, 160, 89, 0.25); /* Tint of Matte Gold */
    color: var(--color-deep-navy);
}

/* 📜 Premium Scrollbar Style */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-warm-off-white);
}

::-webkit-scrollbar-thumb {
    background: var(--color-border-medium);
    border-radius: var(--radius-full);
    border: 2px solid var(--color-warm-off-white);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-matte-gold);
}

/* ==========================================================================
   GLOBAL TYPOGRAPHY ELEMENT DEFINITIONS
   ========================================================================== */

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4 {
    font-family: var(--font-serif);
    color: var(--color-primary);
    line-height: var(--line-height-headline-lg);
    font-weight: var(--weight-headline-lg);
}

h1, .h1 {
    font-size: var(--font-size-headline-lg);
}

h2, .h2 {
    font-size: var(--font-size-headline-md);
    line-height: var(--line-height-headline-md);
    font-weight: var(--weight-headline-md);
}

h3, .h3 {
    font-size: 1.5rem; /* 24px */
    line-height: 1.4;
    font-weight: 600;
}

h4, .h4 {
    font-size: 1.25rem; /* 20px */
    line-height: 1.4;
    font-weight: 600;
}

p, .body-md {
    font-family: var(--font-sans);
    font-size: var(--font-size-body-md);
    line-height: var(--line-height-body-md);
    font-weight: var(--weight-body-md);
    color: var(--color-text-muted);
}

.body-lg {
    font-family: var(--font-sans);
    font-size: var(--font-size-body-lg);
    line-height: var(--line-height-body-lg);
    font-weight: var(--weight-body-lg);
    color: var(--color-text-muted);
}

/* Uppercase Labels */
.label-md {
    font-family: var(--font-sans);
    font-size: var(--font-size-label-md);
    line-height: var(--line-height-label-md);
    font-weight: var(--weight-label-md);
    letter-spacing: var(--letter-spacing-label-md);
    text-transform: uppercase;
}

.text-navy {
    color: var(--color-deep-navy);
}

.text-gold {
    color: var(--color-matte-gold);
}

.text-sage {
    color: var(--color-sage-equilibrium);
}