/* ============================================================
   FontKallos UI Enhancement Layer — Fontshare Edition
   Dark Charcoal + Warm Cream Palette
   - Primary Dark: #0F0F0F  |  Surface: #1A1A1A
   - Cream: #E8E4D9  |  Cream Light: #F4F2E6
   - Borders: #2A2A2A  |  Muted: #888888
   ============================================================ */

@import url('https://cdn.jsdelivr.net/npm/@fontsource-variable/stack-sans-notch/index.css');

@font-face {
    font-family: 'Stack Sans Notch';
    font-style: normal;
    font-display: swap;
    font-weight: 200 700;
    src: url(https://cdn.jsdelivr.net/npm/@fontsource-variable/stack-sans-notch/files/stack-sans-notch-latin-ext-wght-normal.woff2) format('woff2-variations');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: 'Stack Sans Notch';
    font-style: normal;
    font-display: swap;
    font-weight: 200 700;
    src: url(https://cdn.jsdelivr.net/npm/@fontsource-variable/stack-sans-notch/files/stack-sans-notch-latin-wght-normal.woff2) format('woff2-variations');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- CUSTOM PROPERTIES ---------- */
:root {
    --fs-cream: #E8E4D9;
    --fs-cream-light: #F4F2E6;
    --fs-dark: #0F0F0F;
    --fs-surface: #1A1A1A;
    --fs-border: #2A2A2A;
    --fs-border-light: #D5D1C6;
    --fs-muted: #888888;
    --fs-transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    --fs-content-width: 80rem;
    --fs-page-gutter: clamp(1rem, 4vw, 3rem);
    --fs-hero-min-height: clamp(14rem, 24vw, 20rem);
}

/* ---------- GLOBAL TYPOGRAPHY ENHANCEMENT ---------- */
html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Larger Text Elements Defaults */
p {
    font-size: 1.05rem;
    line-height: 1.65;
}

h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); }

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--fs-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--fs-border) transparent;
}

/* ---------- FOCUS STATES ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--fs-cream) !important;
    outline-offset: 2px !important;
}