/* ═══════════════════════════════════════════════════════════════
   DATES User Guide — Fluid Design Tokens
   Imported by ALL pages (index.html, docs.html, future pages).

   Strategy: clamp(MIN, PREFERRED, MAX)
   - MIN  = mobile baseline
   - PREF = fluid vw/vi based value
   - MAX  = large-screen cap

   Screen breakpoints referenced:
     xs   ≤ 480px   (small phones)
     sm   ≤ 640px   (phones)
     md   ≤ 768px   (tablet portrait)
     lg   ≤ 1024px  (tablet landscape / small laptop)
     xl   ≤ 1280px  (laptop)
     2xl  ≤ 1536px  (desktop)
     wide > 1536px  (large & ultrawide monitors)
═══════════════════════════════════════════════════════════════ */

:root {
    /* ── Brand / DATES Palette ────────────────────────── */
    --green-50:   #f0fdf4;
    --green-100:  #dcfce7;
    --green-200:  #baeed1;
    --green-300:  #9ed2b5;
    --green-500:  #10b981;
    --green-600:  #059669;
    --green-700:  #006c49;
    --green-800:  #005236;
    --green-900:  #003320;
    --teal-500:   #2bb0b1;
    --teal-700:   #1e6f72;

    /* ── Surface / Semantic ───────────────────────────── */
    --surface:        #ffffff;
    --surface-low:    #eaf7ee;
    --surface-mid:    #e4f1e8;
    --bg:             #f0fdf4;
    --on-bg:          #131e19;
    --on-surface:     #131e19;
    --on-muted:       #3c4a42;
    --on-subtle:      #6c7a71;
    --border:         #d9e6dd;
    --border-focus:   rgba(0, 108, 73, 0.4);

    /* ── Typography ───────────────────────────────────── */
    --font-hl:   'Manrope', 'Inter', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-code: 'JetBrains Mono', monospace;

    /* Fluid font scale using clamp()
       Formula: clamp(min-rem, min-rem + (max-rem - min-rem) * (100vw - 320px) / (1920px - 320px), max-rem)
       Simplified as clamp(min, preferred-vi, max)
    */
    --text-xs:   clamp(0.68rem,  0.65rem + 0.15vi, 0.78rem);
    --text-sm:   clamp(0.80rem,  0.78rem + 0.18vi, 0.925rem);
    --text-base: clamp(0.925rem, 0.9rem  + 0.22vi, 1.05rem);
    --text-md:   clamp(1.05rem,  1rem    + 0.28vi, 1.2rem);
    --text-lg:   clamp(1.15rem,  1.1rem  + 0.35vi, 1.4rem);
    --text-xl:   clamp(1.35rem,  1.25rem + 0.55vi, 1.75rem);
    --text-2xl:  clamp(1.6rem,   1.45rem + 0.9vi,  2.25rem);
    --text-3xl:  clamp(1.9rem,   1.7rem  + 1.2vi,  2.8rem);
    --text-4xl:  clamp(2.2rem,   1.9rem  + 1.8vi,  3.5rem);
    --text-hero: clamp(2.6rem,   2.2rem  + 2.5vi,  4.75rem);

    /* ── Fluid Spacing ────────────────────────────────── */
    --space-1:  clamp(0.25rem, 0.2rem + 0.2vi,  0.35rem);
    --space-2:  clamp(0.4rem,  0.35rem + 0.25vi, 0.6rem);
    --space-3:  clamp(0.6rem,  0.55rem + 0.3vi,  0.85rem);
    --space-4:  clamp(0.85rem, 0.75rem + 0.4vi,  1.15rem);
    --space-5:  clamp(1rem,    0.9rem  + 0.5vi,  1.5rem);
    --space-6:  clamp(1.25rem, 1.1rem  + 0.7vi,  1.85rem);
    --space-8:  clamp(1.75rem, 1.5rem  + 1vi,    2.5rem);
    --space-10: clamp(2rem,    1.75rem + 1.3vi,  3.25rem);
    --space-12: clamp(2.5rem,  2rem    + 1.8vi,  4rem);
    --space-16: clamp(3rem,    2.5rem  + 2.5vi,  5.5rem);
    --space-20: clamp(4rem,    3rem    + 3vi,    7rem);

    /* ── Fluid Container / Layout ─────────────────────── */
    /* Max width scales: fills screen below 1280px, caps at 1400px on wide */
    --container-max:  1400px;
    --container-pad:  clamp(1rem, 3vi, 3.5rem);   /* side padding scales with viewport */
    --section-pad-y:  clamp(3rem, 6vi, 7rem);      /* vertical section rhythm */

    /* ── Component Sizes ──────────────────────────────── */
    --radius-sm:    clamp(4px,  0.3vi, 6px);
    --radius-md:    clamp(8px,  0.6vi, 12px);
    --radius-lg:    clamp(12px, 0.9vi, 18px);
    --radius-xl:    clamp(16px, 1.2vi, 24px);
    --radius-pill:  100px;

    --icon-sm:   clamp(14px, 1.2vi, 18px);
    --icon-base: clamp(18px, 1.5vi, 22px);
    --icon-lg:   clamp(22px, 1.8vi, 28px);

    --btn-pad-y:  clamp(0.45rem, 0.5vi, 0.65rem);
    --btn-pad-x:  clamp(0.9rem,  1.1vi, 1.4rem);

    --header-h:   clamp(56px, 5vi, 72px);
    --sidebar-w:  clamp(240px, 20vi, 300px);
    --toc-w:      clamp(180px, 15vi, 240px);

    /* ── Shadows / Effects ────────────────────────────── */
    --shadow-sm:   0 2px  8px  rgba(0,108,73,0.06);
    --shadow-md:   0 6px  20px rgba(0,108,73,0.09);
    --shadow-lg:   0 12px 36px rgba(0,108,73,0.12);
    --shadow-glow: 0 6px  24px rgba(0,108,73,0.32);

    --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Accent Gradient ──────────────────────────────── */
    --grad-primary: linear-gradient(135deg, var(--green-700) 0%, var(--green-500) 55%, var(--teal-500) 100%);
}

/* Dark-mode overrides (scoped to [data-theme="dark"]) */
[data-theme="dark"] {
    --bg:          #091410;
    --surface:     #0f1f18;
    --surface-low: #172b22;
    --surface-mid: #1e3a2c;
    --on-bg:       #e7f4eb;
    --on-surface:  #e7f4eb;
    --on-muted:    #9ed2b5;
    --on-subtle:   #6c7a71;
    --border:      rgba(187,202,191,0.16);
    --border-focus:rgba(78,222,163,0.4);
    --green-700:   #10b981;
    --green-500:   #4edea3;
    --teal-500:    #44ccca;
    --shadow-sm:   0 2px 8px  rgba(0,0,0,0.3);
    --shadow-md:   0 6px 20px rgba(0,0,0,0.4);
    --shadow-lg:   0 12px 36px rgba(0,0,0,0.5);
}

/* ═══════════════════════════════════════════════════
   Global base resets (shared across all pages)
═══════════════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    background: var(--bg);
    color: var(--on-bg);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Hide scrollbar globally */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; }

::selection { background: rgba(16, 185, 129, 0.22); color: var(--green-800); }

/* ── Fluid Container ─────────────────────────── */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

/* ── Section vertical rhythm ─────────────────── */
.section-y {
    padding-top: var(--section-pad-y);
    padding-bottom: var(--section-pad-y);
}

/* ── Fluid heading utilities ─────────────────── */
.h-hero { font-family: var(--font-hl); font-size: var(--text-hero); font-weight: 900; line-height: 1.08; letter-spacing: -2px; }
.h-1    { font-family: var(--font-hl); font-size: var(--text-4xl);  font-weight: 900; line-height: 1.12; letter-spacing: -1px; }
.h-2    { font-family: var(--font-hl); font-size: var(--text-3xl);  font-weight: 800; line-height: 1.2;  letter-spacing: -0.5px; }
.h-3    { font-family: var(--font-hl); font-size: var(--text-2xl);  font-weight: 800; line-height: 1.25; }
.h-4    { font-family: var(--font-hl); font-size: var(--text-xl);   font-weight: 700; line-height: 1.3; }
.h-5    { font-family: var(--font-hl); font-size: var(--text-lg);   font-weight: 700; line-height: 1.35; }

.body-lg   { font-size: var(--text-md);   line-height: 1.7; }
.body-base { font-size: var(--text-base); line-height: 1.65; }
.body-sm   { font-size: var(--text-sm);   line-height: 1.6; }
.body-xs   { font-size: var(--text-xs);   line-height: 1.55; }

/* ── Buttons ─────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--btn-pad-y) var(--btn-pad-x);
    border-radius: var(--radius-md);
    font-family: var(--font-hl);
    font-size: var(--text-sm);
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.btn svg { width: var(--icon-sm); height: var(--icon-sm); flex-shrink: 0; }
.btn-filled {
    background: var(--grad-primary);
    color: #fff;
    box-shadow: var(--shadow-glow);
}
.btn-filled:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.btn-ghost {
    background: var(--surface);
    color: var(--green-700);
    border: 1.5px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.btn-ghost:hover { border-color: var(--green-700); background: var(--surface-low); }

/* ── Cards ───────────────────────────────────── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.card:hover {
    border-color: rgba(0,108,73,0.3);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* ── Badge ───────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.badge-green  { background: rgba(16,185,129,0.14); color: var(--green-700); }
.badge-blue   { background: rgba(74,61,255,0.12);  color: #3328c4; }
.badge-teal   { background: rgba(43,176,177,0.14); color: var(--teal-700); }
.badge-amber  { background: rgba(245,158,11,0.14); color: #92400e; }
.badge-purple { background: rgba(161,53,189,0.12); color: #68187c; }
.badge-orange { background: rgba(255,101,63,0.12); color: #cc331f; }