/* ─────────────────────────────────────────────────────────────
   eBASIS — DESIGN TOKENS (v3)
   Pure white page, near-black ink, deep institutional navy.
   Top navbar layout. No warm cream, no decorative tricks.
   ───────────────────────────────────────────────────────────── */

:root {
    /* ─── Ink ─── */
    --color-ink:            #0A0A0A;
    --color-ink-secondary:  #3C3C3C;
    --color-ink-tertiary:   #6E6E6E;
    --color-ink-quaternary: #9A9A9A;
    --color-ink-invert:     #FFFFFF;

    /* ─── Accent — institutional medical blue ─── */
    --color-accent:         #3C95C8;
    --color-accent-hover:   #2C7AA8;
    --color-accent-light:   #E5F1F8;
    --color-accent-subtle:  #F2F8FB;

    /* ─── Secondary — McLean-style restrained blue-gray ─── */
    --color-secondary:      #3A5A7C;
    --color-secondary-hover:#2A4660;

    /* ─── Surfaces ─── */
    --surface-page:         #FFFFFF;
    --surface-page-alt:     #F7F7F5;
    --surface-card:         #FFFFFF;
    --surface-card-dark:    #3C95C8;
    --surface-navbar:       #FFFFFF;
    --surface-navbar-alt:   #3C95C8;
    --surface-elevated:     #FFFFFF;
    --surface-code:         #F2F2EF;

    /* ─── Borders ─── */
    --border-subtle:        #E6E6E3;
    --border-medium:        #D0D0CC;
    --border-strong:        #A8A8A4;
    --border-ink:           #0A0A0A;
    --border-dark-subtle:   rgba(255, 255, 255, 0.12);
    --border-dark-medium:   rgba(255, 255, 255, 0.24);

    /* ─── Shadows — quiet, not dramatic ─── */
    --shadow-sm:     0 1px 2px rgba(10, 10, 10, 0.04);
    --shadow-md:     0 2px 8px rgba(10, 10, 10, 0.06),
                     0 1px 3px rgba(10, 10, 10, 0.03);
    --shadow-lg:     0 8px 32px rgba(10, 10, 10, 0.08),
                     0 2px 8px rgba(10, 10, 10, 0.04);
    --shadow-hover:  0 12px 36px rgba(10, 10, 10, 0.10),
                     0 4px 12px rgba(10, 10, 10, 0.05);
    --shadow-inset:  inset 0 1px 0 rgba(255, 255, 255, 0.5);
    --shadow-navbar: 0 1px 0 var(--border-subtle);

    /* ─── Tier Colors — restrained institutional set ─── */
    --level-1:  #4A6B82;    /* Steel blue */
    --level-2:  #2F5D3A;    /* Forest green */
    --level-3:  #6B4423;    /* Umber */
    --level-4:  #4A3A5E;    /* Deep slate violet */

    /* ─── Typography Families ─── */
    --font-display:  'Newsreader', 'Charter', Georgia, 'Times New Roman', serif;
    --font-body:     'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono:     'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;

    /* ─── Spacing Scale ─── */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  24px;
    --space-6:  32px;
    --space-7:  48px;
    --space-8:  64px;
    --space-9:  96px;
    --space-10: 128px;
    --space-11: 160px;

    /* ─── Radius — tighter, more institutional ─── */
    --radius-sm:  2px;
    --radius-md:  4px;
    --radius-lg:  8px;
    --radius-xl:  12px;
    --radius-2xl: 16px;

    /* ─── Transitions ─── */
    --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast:    150ms;
    --duration-normal:  250ms;
    --duration-slow:    400ms;

    /* ─── Layout ─── */
    --navbar-height:    72px;
    --content-max:      760px;
    --content-wide:    1200px;
    --content-pad-lg:   48px;
    --content-pad-md:   32px;
    --content-pad-sm:   20px;
}

/* ─── Global resets ──────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    background: var(--surface-page);
    color: var(--color-ink);
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--navbar-height) + var(--space-4));
}

body {
    margin: 0;
    background: var(--surface-page);
    color: var(--color-ink-secondary);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
}

::selection {
    background: var(--color-accent);
    color: var(--color-ink-invert);
}

/* ─── Scrollbar — quiet default styling ──────────────────── */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--border-medium) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 0;
    border: 2px solid var(--surface-page);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border-strong);
}

/* ─── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}