/* =========================================================
   GoldPriceBD
   CSS Framework
   base.css
   Version: 1.0

   Purpose:
   - Global website foundation
   - Typography
   - Body
   - Containers
   - Sections
   - Links
   - Images
   - Accessibility
   - Global UI behavior

   IMPORTANT:
   - Do not add component-specific styles here.
   - Do not add calculator-specific styles here.
   - Use variables.css for design values.
   ========================================================= */


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

html {
    font-size: 16px;
    background: var(--color-bg);
    color: var(--color-text);
}


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

body {
    min-width: 320px;
    min-height: 100vh;

    background: var(--color-bg);
    color: var(--color-text);

    font-family: var(--font-family-base);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    transition:
        background-color var(--transition-normal),
        color var(--transition-normal);
}


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

main {
    display: block;
    width: 100%;
}


/* =========================================================
   HEADINGS
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-text);
    font-family: var(--font-family-heading);
    line-height: var(--line-height-tight);
    font-weight: var(--font-weight-bold);
}


/* =========================================================
   HEADING SCALE
   ========================================================= */

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

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

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

h4 {
    font-size: var(--font-size-xl);
}

h5 {
    font-size: var(--font-size-lg);
}

h6 {
    font-size: var(--font-size-md);
}


/* =========================================================
   PARAGRAPH
   ========================================================= */

p {
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}


/* =========================================================
   STRONG / BOLD
   ========================================================= */

strong,
b {
    font-weight: var(--font-weight-bold);
}


/* =========================================================
   SMALL TEXT
   ========================================================= */

small {
    font-size: var(--font-size-sm);
}


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

a {
    color: var(--color-primary);
    transition:
        color var(--transition-fast),
        opacity var(--transition-fast);
}

a:hover {
    color: var(--color-primary-hover);
}

a:active {
    opacity: 0.85;
}


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

img {
    height: auto;
}

img[width],
img[height] {
    max-width: 100%;
}


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

svg {
    max-width: 100%;
}


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

::selection {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

::-moz-selection {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}


/* =========================================================
   CONTAINER
   ========================================================= */

.container {
    width: min(
        100% - (var(--container-padding) * 2),
        var(--container-width)
    );

    margin-inline: auto;
}


/* =========================================================
   WIDE CONTAINER
   ========================================================= */

.container-wide {
    width: min(
        100% - (var(--container-padding) * 2),
        var(--container-width-wide)
    );

    margin-inline: auto;
}


/* =========================================================
   READING CONTAINER
   ========================================================= */

.container-reading {
    width: min(
        100% - (var(--container-padding) * 2),
        var(--content-reading-width)
    );

    margin-inline: auto;
}


/* =========================================================
   SECTION
   ========================================================= */

.section {
    width: 100%;
    padding-block: var(--space-12);
}


/* =========================================================
   SECTION SMALL
   ========================================================= */

.section-sm {
    width: 100%;
    padding-block: var(--space-8);
}


/* =========================================================
   SECTION LARGE
   ========================================================= */

.section-lg {
    width: 100%;
    padding-block: var(--space-16);
}


/* =========================================================
   SECTION HEADER
   ========================================================= */

.section-header {
    margin-bottom: var(--space-8);
}

.section-header h1,
.section-header h2,
.section-header h3 {
    margin-bottom: var(--space-3);
}

.section-header p {
    max-width: var(--content-reading-width);
}


/* =========================================================
   TEXT ALIGNMENT
   ========================================================= */

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}


/* =========================================================
   TEXT COLORS
   ========================================================= */

.text-primary {
    color: var(--color-primary);
}

.text-secondary {
    color: var(--color-text-secondary);
}

.text-muted {
    color: var(--color-text-muted);
}

.text-success {
    color: var(--color-success);
}

.text-warning {
    color: var(--color-warning);
}

.text-danger {
    color: var(--color-danger);
}

.text-info {
    color: var(--color-info);
}


/* =========================================================
   BACKGROUND UTILITIES
   ========================================================= */

.bg-default {
    background: var(--color-bg);
}

.bg-soft {
    background: var(--color-bg-soft);
}

.bg-card {
    background: var(--color-bg-card);
}

.bg-gold {
    background: var(--gold-bg);
}

.bg-silver {
    background: var(--silver-bg);
}


/* =========================================================
   VISIBILITY
   ========================================================= */

.hidden {
    display: none !important;
}

.invisible {
    visibility: hidden !important;
}


/* =========================================================
   WIDTH
   ========================================================= */

.w-full {
    width: 100%;
}

.w-auto {
    width: auto;
}


/* =========================================================
   HEIGHT
   ========================================================= */

.h-full {
    height: 100%;
}

.h-auto {
    height: auto;
}


/* =========================================================
   OVERFLOW
   ========================================================= */

.overflow-hidden {
    overflow: hidden;
}

.overflow-auto {
    overflow: auto;
}

.overflow-x-auto {
    overflow-x: auto;
}


/* =========================================================
   POSITION
   ========================================================= */

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.sticky {
    position: sticky;
}


/* =========================================================
   POINTER
   ========================================================= */

.pointer {
    cursor: pointer;
}

.no-pointer {
    cursor: default;
}


/* =========================================================
   USER SELECT
   ========================================================= */

.select-none {
    user-select: none;
}

.select-text {
    user-select: text;
}


/* =========================================================
   SCREEN READER ONLY
   ========================================================= */

.sr-only {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;
    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


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

:focus-visible {
    outline:
        2px solid
        var(--color-primary);

    outline-offset: 3px;
}


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

[disabled],
.disabled {
    cursor: not-allowed;
    opacity: 0.6;
}


/* =========================================================
   LOADING STATE
   ========================================================= */

.is-loading {
    pointer-events: none;
    user-select: none;
}


/* =========================================================
   GLOBAL TRANSITION
   ========================================================= */

.theme-transition,
.theme-transition *,
.theme-transition *::before,
.theme-transition *::after {
    transition:
        background-color var(--transition-normal),
        border-color var(--transition-normal),
        color var(--transition-normal),
        box-shadow var(--transition-normal);
}


/* =========================================================
   DARK MODE BODY
   ========================================================= */

[data-theme="dark"] body {
    background: var(--color-bg);
    color: var(--color-text);
}


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

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

    body {
        scroll-behavior: auto;
    }

    a {
        transition: none;
    }

}