/* Shared design tokens — spacing, typography, and border radius.
   Loaded via stylesheet_link_tag in shared/_header.html.erb before each site's CSS.
   Site-specific variables (colors, brand tokens) remain in each site's stylesheet. */

:root {
    /* Spacing */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;
    --spacing-2xl: 40px;

    /* Typography — Font Sizes */
    --font-size-xs: 10px;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 32px;

    /* Typography — Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Typography — Line Heights */
    --line-height-none: 1;
    --line-height-tight: 1.2;
    --line-height-snug: 1.3;
    --line-height-normal: 1.4;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.6;

    /* Border Radius */
    --radius-xs: 3px;
    --radius-sm: 5px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 10px;
    --radius-2xl: 15px;
    --radius-3xl: 20px;
    --radius-full: 9999px;
}