# presentation/tokens/base.tokens.css

> 215 lines of code and 0 definitions.

Tree: Site tree
Language: css
Layer: product
Canonical: https://banes-lab.com/anatomy/tree#file-presentation-tokens-base-tokens-css
Source text: https://banes-lab.com/assets/sources/source.20713c0bee6e1eae29f352c4a0b8e6e653fa8063adf1192df31b918fd7053b92.generated.txt

## Source

```css
:root {
    --accent-dimmed: rgb(206 165 85 / 35%);
    --accent-faint: rgb(206 165 85 / 5%);
    --accent-glow: rgb(206 165 85 / 14%);
    --accent-half: rgb(206 165 85 / 50%);
    --accent-hover: rgb(206 165 85 / 40%);
    --accent-medium: rgb(226 169 64 / 30%);
    --accent-outline: rgb(206 165 85 / 25%);
    --accent-soft: rgb(206 165 85 / 15%);
    --accent-subtle: rgb(226 169 64 / 10%);
    --accent-tint: rgb(206 165 85 / 10%);
    --animate-bounce: 0.6s;
    --animate-fade: 0.4s;
    --animate-rise: 0.6s;
    --animate-rise-large: 0.8s;
    --animate-scale: 0.5s;
    --banes-lab-accent: #cea555;
    --banes-lab-accent-dark: #cea555a1;
    --banes-lab-liquid: #61afd8;
    --banes-lab-main: #333;
    --banes-lab-ground: #1f1f1f;
    --banes-lab-ground-deep: #171717;
    --banes-lab-pag: #e28840;
    --banes-lab-pag-dark: #e28840a1;
    --black: #000;
    --black-alpha-overlay: rgb(0 0 0 / 30%);
    --blur-heavy: blur(12px);
    --blur-soft: blur(4px);
    --border-accent: 3px;
    --border-accent-left: var(--border-accent) solid var(--banes-lab-accent);
    --border-m: 2px;
    --border-s: 1px;
    --border-xl: 4px;
    --card-accent: #cea555;
    --card-bg: rgb(20 20 20 / 40%);
    --card-border-accent: rgb(206 165 85 / 50%);
    --callout-gradient: linear-gradient(135deg, rgb(206 165 85 / 8%) 0%, rgb(206 165 85 / 3%) 100%);
    --code-block: rgb(19 19 19 / 83.6%);
    --danger-outline: rgb(220 53 69 / 30%);
    --danger-soft: rgb(220 53 69 / 15%);
    --danger-primary: #f44336;
    --easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --easing-ease: ease;
    --easing-hold: cubic-bezier(0.7, 0, 0.9, 0.4);
    --easing-rise: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --font-display: 2.4rem;
    --font-family-base: "JetBrains Mono", monospace;
    --font-family-heading: "IBM Plex Mono", monospace;
    --font-family-icon: "bootstrap-icons", monospace;
    --font-family-mono: "Source Code Pro", monospace;
    --font-hero: 1.6rem;
    --font-lg: 0.88rem;
    --font-md: 0.7rem;
    --font-prose: 0.95rem;
    --font-regular: 0.8rem;
    --font-sm: 0.65rem;
    --font-weight-bold: 700;
    --font-weight-medium: 500;
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-xl: 0.9rem;
    --font-xs: 0.6rem;
    --font-xxl: 1.5rem;
    --accent-blue: #3b82f6;
    --accent-teal: #14b8a6;
    --accent-violet: #8b5cf6;
    --accent-emerald: #34d399;
    --accent-sky: #38bdf8;
    --accent-rose: #fb7185;
    --accent-slate: #94a3b8;
    --accent-indigo: #818cf8;
    --accent-fuchsia: #e879f9;
    --accent-lime: #a3e635;
    --gradient-page:
        radial-gradient(60% 60% at 50% 30%, var(--accent-glow), transparent 70%),
        linear-gradient(
            180deg,
            var(--banes-lab-main) 0%,
            var(--banes-lab-ground) 45%,
            var(--banes-lab-ground-deep) 100%
        );
    --height-code-collapsed: 16.5rem;
    --hex-arrow: #ccc;
    --hex-call: #cea555;
    --hex-control: #8b5cf6;
    --hex-declare: #14b8a6;
    --hex-flag-high: #f44336;
    --hex-flag-low: #888;
    --hex-flag-medium: #ffc107;
    --hex-path: rgb(255 255 255 / 35%);
    --hex-read: #61afd8;
    --hex-stroke: #131313;
    --hex-structure: #4a4f57;
    --hex-write: #f44336;
    --hex-opacity: 0.92;
    --hex-stroke-width: 0.8;
    --hex-flag-width: 2.2;
    --hex-current-width: 4;
    --ghost-decay: 800ms;
    --hex-call-bright: #ffc21f;
    --hex-control-bright: #a86bff;
    --hex-declare-bright: #12ffdc;
    --hex-read-bright: #38c6ff;
    --hex-structure-bright: #9aa3b0;
    --hex-write-bright: #ff3d2e;
    --hex-path-width: 1.1;
    --height-diagram-collapsed: 28rem;
    --height-record-estimate: 6rem;
    --indent-tree: 0.875rem;
    --rotate-quarter: 90deg;
    --icon-baseline-shift: -0.125em;
    --letter-spacing-wide: 0.05em;
    --line-height-loose: 1.75;
    --line-height-normal: 1.5;
    --opacity-dim: 0.7;
    --opacity-faint: 0.05;
    --opacity-high: 0.8;
    --opacity-low: 0.2;
    --opacity-subtle: 0.1;
    --overlay-light: rgb(255 255 255 / 20%);
    --overlay-medium: rgb(255 255 255 / 30%);
    --overlay-panel-vh: 82;
    --diagram-ratio: 2;
    --panel-footer-columns: 3;
    --panel-wide-vh: 72;
    --overlay-subtle: rgb(255 255 255 / 10%);
    --percent-full: 100%;
    --percent-half: 50%;
    --percent-most: 80%;
    --percent-none: 0%;
    --pag-outline: rgb(212 175 55 / 30%);
    --pag-soft: rgb(212 175 55 / 15%);
    --pag-tint: rgb(212 175 55 / 10%);
    --radius-lg: 0.5rem;
    --radius-md: 0.375rem;
    --radius-round: 50%;
    --radius-sm: 0.25rem;
    --radius-xs: 0.125rem;
    --rise-lg: 5rem;
    --rise-sm: 1.25rem;
    --scale-diagram: 0.7;
    --scale-hidden: 0.1;
    --scale-overshoot: 1.05;
    --scale-settle: 0.95;
    --scale-shrunk: 0.9;
    --scale-tiny: 0.3;
    --size-arrow: 0.375rem;
    --size-checkbox: 1.125rem;
    --size-emblem: 7.5rem;
    --size-emblem-lg: 7rem;
    --size-icon-glyph: 1em;
    --size-icon-inline: 1.2em;
    --size-icon-md: 3.5rem;
    --size-icon-xl: 1.5rem;
    --size-logo-hero: 8rem;
    --size-logo-hero-sm: 6rem;
    --space-code-h: 0.4em;
    --space-code-v: 0.1em;
    --space-lg: 0.938rem;
    --space-md: 0.75rem;
    --space-section: 3rem;
    --space-sm: 0.5rem;
    --space-xl: 1.25rem;
    --space-xs: 0.25rem;
    --space-xxl: 1.563rem;
    --space-xxs: 0.125rem;
    --success-outline: rgb(40 167 69 / 30%);
    --success-primary: #61afd8;
    --success-soft: rgb(40 167 69 / 15%);
    --tab-accent: #cea555;
    --tab-accent-dark: #cea555a1;
    --text-light-gray: #ccc;
    --text-mid-gray: #888;
    --touch-target-min: 2.75rem;
    --transform-hover-lift: translateY(-2px);
    --transform-hover-md: translateY(-2px) scale(1.02);
    --transform-nudge-right: translateX(0.25rem);
    --transition-base: 200ms;
    --transition-fast: 150ms;
    --transition-slow: 300ms;
    --vh: 1vh;
    --viewport-full: 100vh;
    --warning-primary: #ffc107;
    --white: #fff;
    --white-alpha-border: rgb(255 255 255 / 20%);
    --white-alpha-muted: rgb(255 255 255 / 60%);
    --white-alpha-primary: rgb(255 255 255 / 70%);
    --white-alpha-secondary: rgb(255 255 255 / 80%);
    --white-alpha-tertiary: rgb(255 255 255 / 90%);
    --tooltip-bg: rgb(19 19 19 / 95%);
    --width-card-lg: 40rem;
    --width-card-min: 17.5rem;
    --width-card-sm: 13.75rem;
    --width-content-md: 50rem;
    --width-label: 10rem;
    --width-metric-min: 7rem;
    --width-tooltip-max: 18rem;
    --word-spacing-mono: -0.12em;
    --width-tooltip-min: 12rem;
    --width-modal-lg: 75rem;
    --width-sidebar-contents: 13.75rem;
    --width-tree-max: 24rem;
    --z-below: -1;
    --z-dropdown: 100;
    --z-fixed: 1030;
    --z-modal: 1500;
    --z-preview: 9999;
    --z-sticky: 1020;
}

@supports (height: 100svh) {
    :root {
        --vh: 1svh;
    }
}
```