/**
 * CSS variables for the site. These are used throughout the stylesheets to maintain consistency and make it easy to update
 * the site's design. Variables include colors, font settings, layout dimensions, and responsive breakpoints.
 */

:root {
    --font: 'Arial, sans-serif';
    /* font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; */

    /* Sizes */
    --brand-height: clamp(50px, 10vw, 150px);
    --nameplate-height: calc(var(--brand-height) * 0.3);
    --social-logo-size: clamp(24px, 2vw, 32px);
    --text-min-width: 40ch;
    --left-max-width: clamp(var(--text-min-width), 80ch, 90ch);
    --right-max-width: clamp(20ch, 30ch, max(50ch, calc(var(--social-logo-size)*10)));
    --main-max-width: calc(var(--left-max-width) + var(--right-max-width) + 4rem);

    /* Colors */
    --body-bg: #f5f5f5;
    --header-bg: #fff;
    --text: #333;
    --brand: #007aff;
    --brand-muted: #007aff80;
    --accent: #ff7a59;
    --border: var(--brand-muted);
}