/*
Path: /source/shared/css/global.css
Purpose: Act as the primary global stylesheet for layout-specific overrides and shared component designs.
*/

/* ==========================================================================
   CORE DEPENDENCIES (Nested Imports resolved automatically by Vite)
   ========================================================================== */
@import "./variables.css";
@import "./reset.css";
@import "./form.css";
@import "./layout.css";

/* ==========================================================================
   GLOBAL CUSTOM STYLES
   ========================================================================== */

/**
 * 1. CORE BODY OVERRIDES
 * Override the obsolete variables from reset.css to use the new semantic tokens.
 * Explicitly inject system-wide default font family and baseline font sizing.
 */
body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: var(--font-size-base);
}

/**
 * 2. SHARED ELEMENT TYPOGRAPHY & ICON COLOR SYNC
 * Forces all icons and links to inherit color from their parent containers,
 * ensuring automatic white/dark color flipping based on the html.dark configuration.
 */
a,
i {
    color: inherit;
    text-decoration: none;
}

/**
 * 3. INTERACTIVE BUTTON NORMALIZATION
 * Cleans default browser styling out of buttons while enforcing global color inheritance.
 */
button {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
}

/**
 * 4. GLOBAL TYPOGRAPHY BOUNDARIES
 * Establishes minimalist font size scales for core heading elements mapped to design tokens.
 * All properties like margins and weights remain unassigned for incremental control later.
 */
h1 {
    font-size: var(--font-size-3xl);
}

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

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