/* ============================================================
   COMPONENT TOKENS
   Maps semantic tokens to component-specific usage
   Theme switching handled automatically by semantic tokens
============================================================ */
:root {
    /* Colors */
    --color-bg: var(--tb-bg-lower-deck);
    --color-text: var(--tb-fg-chew);
    --color-text-muted: var(--tb-fg-pipe-down);
    --color-link: var(--tb-fg-pipe-down);
    --color-link-hover: var(--tb-fg-chew);
    --color-border: var(--tb-border-seam);
    --color-code-bg: var(--tb-bg-hold);

    /* Buttons */
    --button-bg: var(--tb-bg-muster);
    --button-bg-hover: var(--tb-bg-buoy);

    /* Typography */
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    --font-heading: 'PT Serif', serif;
    --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    --font-size-base: 14px;
    --font-size-small: 12px;
    --font-size-h1: 1.5rem;
    --font-size-h2: 1.25rem;
    --font-size-h3: 1rem;
    --line-height: 1.6;

    /* Layout */
    --content-width: 560px;
    --spacing-unit: 1rem;
    --content-padding-inline: 1rem; /* Aligns content with tab text */
}

/* ============================================================
   GLOBAL RESETS
============================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: var(--font-size-base);
}

body {
    font-family: var(--font-body);
    line-height: var(--line-height);
    color: var(--color-text);
    background-color: var(--color-bg);
    padding: var(--spacing-unit);
}

.container {
    max-width: var(--content-width);
    margin: 80px auto;
    padding: 12px;
}