/**
 * FORESEON CORE DESIGN TOKENS
 * System: Modern Editorial Swiss Grid
 */

/* Fluid Typography and Spacing Engine */
:root {
    /* Color Palette */
    --color-bg: #FBFBFA;
    --color-text-main: #0F1115;
    --color-text-muted: #62656C;
    --color-accent: #1040FF;
    --color-border: rgba(15, 17, 21, 0.08);
    --color-border-heavy: rgba(15, 17, 21, 0.8);

    /* Grid & Radii Layout Tokens */
    --grid-gap: clamp(1.5rem, 3vw, 3rem);
    --radius-none: 0px;
    --radius-sm: 2px;

    /* Typographic Fluid Scale (Min: 320px, Max: 1920px) */
    --font-serif: "Display Serif", Georgia, serif;
    --font-sans: "UI Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --text-display: clamp(2.5rem, 6vw + 1rem, 6.5rem);
    --text-h1: clamp(2rem, 4vw + 1rem, 4rem);
    --text-h2: clamp(1.5rem, 2.5vw + 0.5rem, 2.5rem);
    --text-body: clamp(1rem, 0.2vw + 0.9rem, 1.15rem);
    --text-meta: clamp(0.75rem, 0.1vw + 0.7rem, 0.85rem);

    /* Animation Pacing */
    --timing-premium: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-slow: 0.6s;
    --duration-fast: 0.2s;
}

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    background-color: var(--color-bg);
    color: var(--color-text-main);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    width: 100%;
}

/* Core Typographic Rules */
h1, h2, h3, .display-text {
    font-family: var(--font-serif);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

p {
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.005em;
    color: var(--color-text-main);
}

.meta-text {
    font-family: var(--font-sans);
    font-size: var(--text-meta);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
}

/* Interactive Resets */
a {
    color: inherit;
    text-decoration: none;
    transition: color var(--duration-fast) var(--timing-premium);
}

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

/* Focus States for Keyboard Accessibility */
*:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
}

/* Accessibility Utility */
.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;
}