max-sixty__worktrunk/docs/templates/_variables.html

<style>
    /* Fallback fonts with adjusted metrics to prevent layout shift on font swap.
     * These match the metrics of the custom fonts so text doesn't reflow.
     * Values from: https://developer.chrome.com/blog/font-fallbacks
     * Inter values: https://github.com/rsms/inter/discussions/632
     */
    @font-face {
        font-family: "Inter Fallback";
        src: local("Arial"), local("ArialMT");
        ascent-override: 90.2%;
        descent-override: 22.5%;
        line-gap-override: 0%;
        size-adjust: 107.4%;
    }
    @font-face {
        font-family: "Plus Jakarta Sans Fallback";
        src: local("Arial"), local("ArialMT");
        /* Plus Jakarta Sans has similar metrics to Inter (geometric sans-serif) */
        ascent-override: 94%;
        descent-override: 23%;
        line-gap-override: 0%;
        size-adjust: 104%;
    }
    @font-face {
        font-family: "JetBrains Mono Fallback";
        src: local("Menlo"), local("Consolas"), local("Monaco");
        ascent-override: 102%;
        descent-override: 30%;
        line-gap-override: 0%;
        size-adjust: 98%;
    }

    :root {
        /* Warm Workbench Theme - Light Mode */

        /* Backgrounds */
        --wt-color-bg: #faf9f7;            /* near-white with warmth */
        --wt-color-bg-elevated: #ffffff;   /* pure white content cards */
        --wt-color-bg-soft: #f5f3f0;       /* subtle warm gray for header/sections */

        /* Borders */
        --wt-color-border-subtle: #e8e6e3;

        /* Text */
        --wt-color-text: #2d2926;          /* warm charcoal */
        --wt-color-text-muted: #6b635b;    /* warm gray */
        --wt-color-text-soft: #78716a;     /* lighter warm gray, WCAG AA compliant */

        /* Accents */
        --wt-color-accent: #d97706;        /* amber */
        --wt-color-accent-soft: #fef3c7;
        --wt-color-accent-strong: #b45309;
        --wt-color-link: #b45309;

        /* Craft details */
        --wt-color-craft-brown: #8b7355;   /* h2 underlines */

        /* Code */
        --wt-color-code-bg: #f8f7f6;
        --wt-color-code-border: #e5e3e0;
        --wt-color-code-inline-text: #b45309;  /* amber text for inline code */

        /* Shadows - using oklch for proper alpha blending */
        --wt-shadow-soft: oklch(0% 0 0 / 0.03);
        --wt-shadow-medium: oklch(0% 0 0 / 0.06);
        --wt-shadow-accent: oklch(from var(--wt-color-accent) l c h / 0.15);
        --wt-shadow-accent-strong: oklch(from var(--wt-color-accent) l c h / 0.25);

        /* Terminal output colors (used by terminal shortcode) */
        --cyan: #0a8080;
        --green: #1b7f4b;
        --bright-white: #ece9e6;  /* gutter background - subtle on light theme */
        --red: #dc2626;
        --yellow: #ca8a04;
        --blue: #2563eb;
        --magenta: #9333ea;
        --bright-black: #6b7280;

        /* Layout */
        --wt-header-height: 60px;
        --wt-main-padding-top: 40px;

        /* Border Radius Scale */
        --wt-radius-sm: 0.25rem;   /* 4px - small elements, TOC items */
        --wt-radius-md: 0.5rem;    /* 8px - buttons, inputs, cards */
        --wt-radius-lg: 0.75rem;   /* 12px - content cards, modals */
        --wt-radius-pill: 999px;   /* pill shapes */

        /* Typography - adjusted fallbacks prevent layout shift on font swap */
        --wt-font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
        --wt-font-head: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", var(--wt-font-sans);
        --wt-font-mono: "JetBrains Mono", "JetBrains Mono Fallback", "Fira Code", "SF Mono", Menlo, monospace;
    }

    /* Dark Mode - follows system preference */
    @media (prefers-color-scheme: dark) {
        :root {
            /* Backgrounds - warm darks */
            --wt-color-bg: #1c1b1a;
            --wt-color-bg-elevated: #262524;
            --wt-color-bg-soft: #222120;

            /* Borders */
            --wt-color-border-subtle: #3a3836;

            /* Text - warm lights */
            --wt-color-text: #e8e6e3;
            --wt-color-text-muted: #a8a29e;
            --wt-color-text-soft: #8a847e;

            /* Accents - slightly brighter for dark backgrounds */
            --wt-color-accent: #f59e0b;
            --wt-color-accent-soft: #422006;
            --wt-color-accent-strong: #fbbf24;
            --wt-color-link: #fcd34d;

            /* Craft details - muted amber ties to brand in dark mode */
            --wt-color-craft-brown: #92400e;

            /* Code */
            --wt-color-code-bg: #252321;
            --wt-color-code-border: #3a3735;
            --wt-color-code-inline-text: #fbbf24;  /* amber text for inline code */

            /* Shadows - lighter in dark mode for visibility */
            --wt-shadow-soft: oklch(0% 0 0 / 0.15);
            --wt-shadow-medium: oklch(0% 0 0 / 0.25);
            --wt-shadow-accent: oklch(from var(--wt-color-accent) l c h / 0.2);
            --wt-shadow-accent-strong: oklch(from var(--wt-color-accent) l c h / 0.35);

            /* Terminal colors - brighter for dark mode */
            --cyan: #67d4d4;
            --green: #4ade80;
            --bright-white: #3a3836;  /* gutter background - subtle on dark theme */
            --red: #f87171;
            --yellow: #fbbf24;
            --blue: #60a5fa;
            --magenta: #c084fc;
            --bright-black: #6b7280;
        }
    }
</style>