/* =========================================
   JUSTWEB OS — BASE SYSTEM (READABILITY+)
   base.css  ·  Scale: 110%
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
    /* Brand & Surface tokens remain the same */
    --red: #D93025;
    --blue: #1A56E8;
    --green: #00C96B;
    --dark: #0F1117;
    --off-white: #F7F6F2;

    /* Typography Hierarchy */
    --font-b: 'Plus Jakarta Sans', sans-serif;
    --font-m: 'IBM Plex Mono', monospace;
    
    /* 1.1rem base makes the standard text feel substantial */
    --fs-base: 1.1rem; 
    --fs-sm: 0.95rem;
    --fs-h1: 3rem;
    --fs-h2: 2.2rem;

    /* Layout */
    --max-w: 1440px; /* Slightly wider to accommodate larger text */
    --pad-x: 48px;
    --sec-y: 120px;
    --ease: cubic-bezier(0.16,1,0.3,1);
}

/* ── RESET & GLOBAL SCALING ────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

html { 
    scroll-behavior:smooth; 
    /* The 110% Foundation */
    font-size: 110%; 
}

body {
    font-family: var(--font-b);
    background: var(--off-white);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    line-height: 1.7; /* Increased for high-scale readability */
    letter-spacing: -0.015em;
    font-size: var(--fs-base);
}

/* ── ADMIN INTERFACE ADJUSTMENTS ────────────────────────────── */
/* We keep the sidebar text slightly smaller so it stays scannable */
.ad-sidebar {
    font-size: 0.9rem; 
}

.ad-nav-link {
    padding: 12px 14px;
    gap: 14px;
}

/* ── HEADERS ────────────────────────────────────────────────── */
h1, h2, h3, h4 { 
    line-height: 1.15; 
    letter-spacing: -0.03em; /* Tighter tracking for large headers */
    font-weight: 800;
    margin-bottom: 0.5em;
}

/* ── UTILITIES ──────────────────────────────────────────────── */
.mono { 
    font-family: var(--font-m); 
    letter-spacing: -0.02em;
    font-weight: 500; 
}

.container-wide {
    width:100%; max-width:var(--max-w);
    margin:0 auto; padding:0 var(--pad-x);
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */

/* Desktop paragraph scale (+7%) */
@media(min-width:769px){
    p { font-size: 1.07em; }
}
@media(max-width:1100px){
    :root { --pad-x:32px; }
    html { font-size: 105%; } /* Step down slightly for laptops */
}
@media(max-width:768px){
    :root { --pad-x:20px; }
    html { font-size: 100%; } /* Standard for mobile */
}