/* =========================
   ROOT VARIABLES
========================= */
:root {
    --navy: #0b1c2d;
    --orange: #ff7a00;
   --bg:#f5f5f5;
    --card: #ffffff;
   --border:#edf0f3;
    --text: #1f2937;
    --muted: #6b7280;
}

/* =========================
   RESET / BASE
========================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;

    scroll-behavior:smooth;
}

body{
    margin:0;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;

    background:#f5f5f5;

    color:var(--text);

    line-height:1.4;

    overflow-x:hidden;

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

    text-rendering:optimizeLegibility;
}
/* =========================
   LINKS & BUTTONS
========================= */
a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

button:focus,
button:focus-visible,
a:focus,
a:focus-visible {
    outline: none !important;
}

/* =========================
   IMAGES & MEDIA
========================= */
img,
svg {
    max-width: 100%;
    display: block;
}

/* =========================
   LAYOUT HELPERS
========================= */
.container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 12px;
}

.hidden {
    display: none !important;
}


/* =========================
   CARDS (GENERIC)
========================= */
.card {
    background: var(--card);
    border-radius: 14px;
    border: 1px solid var(--border);
    padding: 12px;
}

/* =========================
   SKELETON LOADER
========================= */
.skeleton {
    background: linear-gradient(
        90deg,
        #eee 25%,
        #f5f5f5 37%,
        #eee 63%
    );
    background-size: 400% 100%;
    animation: shimmer 1.2s ease-in-out infinite;
    border-radius: 14px;
    min-height: 180px;
}

@keyframes shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

/* =========================
   TEXT HELPERS
========================= */
.text-center {
    text-align: center;
}

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

.text-sm {
    font-size: 13px;
}

.text-lg {
    font-size: 18px;
    font-weight: 600;
}

/* =========================
   DESKTOP ENHANCEMENTS
========================= */
@media (min-width: 768px) {

    .container {
        padding-inline: 16px;
    }
}