/* Rungard Web design tokens - the shared source of truth for CSS primitives. */
:root {
    /* Layout */
    --rg-layout-topnav-height: 100px;
    --rg-layout-workspace-header-height: 64px;
    --rg-layout-sidebar-width: 72px;
    --rg-layout-device-sidebar-width: 232px;
    --rg-layout-device-sidebar-offset: var(--rg-layout-device-sidebar-width);
    --rg-layout-page-gutter: clamp(var(--rg-space-4), 2vw, var(--rg-space-6));
    --rg-layout-content-max-width: 1360px;
    --rg-layout-reading-measure: 70ch;

    /* Typography */
    --rg-font-family: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
    --rg-font-weight-regular: 400;
    --rg-font-weight-medium: 500;
    --rg-font-weight-strong: 600;
    --rg-font-weight-bold: 700;

    /* Material type roles. Display and headline sizes scale down on narrow viewports while
       keeping the role hierarchy intact. Body copy uses a 1.5 line height for readability. */
    --rg-type-display-large-size: clamp(2.75rem, 5vw, 3.5rem);
    --rg-type-display-large-line-height: 1.14;
    --rg-type-display-medium-size: clamp(2.375rem, 4vw, 2.8125rem);
    --rg-type-display-medium-line-height: 1.16;
    --rg-type-display-small-size: clamp(2rem, 3.25vw, 2.25rem);
    --rg-type-display-small-line-height: 1.22;
    --rg-type-headline-large-size: clamp(1.75rem, 2.5vw, 2rem);
    --rg-type-headline-large-line-height: 1.25;
    --rg-type-headline-medium-size: clamp(1.625rem, 2vw, 1.75rem);
    --rg-type-headline-medium-line-height: 1.29;
    --rg-type-headline-small-size: 1.5rem;
    --rg-type-headline-small-line-height: 1.33;
    --rg-type-title-large-size: 1.375rem;
    --rg-type-title-large-line-height: 1.27;
    --rg-type-title-medium-size: 1rem;
    --rg-type-title-medium-line-height: 1.5;
    --rg-type-title-small-size: 0.875rem;
    --rg-type-title-small-line-height: 1.43;
    --rg-type-body-large-size: 1rem;
    --rg-type-body-large-line-height: 1.5;
    --rg-type-body-medium-size: 0.875rem;
    --rg-type-body-medium-line-height: 1.43;
    --rg-type-body-small-size: 0.75rem;
    --rg-type-body-small-line-height: 1.33;
    --rg-type-label-large-size: 0.875rem;
    --rg-type-label-large-line-height: 1.43;
    --rg-type-label-medium-size: 0.75rem;
    --rg-type-label-medium-line-height: 1.33;
    --rg-type-label-small-size: 0.6875rem;
    --rg-type-label-small-line-height: 1.45;
    --rg-type-input-label-size: 0.65625rem;
    --rg-type-heading-letter-spacing: -0.02em;
    --rg-type-label-letter-spacing: 0.01em;

    /* Compatibility aliases for existing component styles. */
    --rg-type-workspace-title-size: var(--rg-type-headline-large-size);
    --rg-type-body-size: var(--rg-type-body-large-size);

    /* Standalone links use brand color because their surrounding UI establishes the affordance.
       Links embedded in prose keep an underline as the non-color cue. */
    --rg-link-color: var(--mud-palette-primary);
    --rg-link-underline-offset: 0.16em;

    /* Spacing follows an 8px layout grid with 4px half-steps for compact UI. */
    --rg-space-0: 0;
    --rg-space-1: 4px;
    --rg-space-2: 8px;
    --rg-space-3: 12px;
    --rg-space-4: 16px;
    --rg-space-5: 20px;
    --rg-space-6: 24px;
    --rg-space-8: 32px;
    --rg-space-10: 40px;
    --rg-space-12: 48px;
    --rg-space-16: 64px;
    --rg-space-20: 80px;
    --rg-space-24: 96px;

    /* Semantic spacing roles keep page and component rhythm consistent. */
    --rg-space-control-gap: var(--rg-space-2);
    --rg-space-field-gap: var(--rg-space-3);
    --rg-space-card-padding: var(--rg-space-4);
    --rg-space-stack: var(--rg-space-5);
    --rg-space-section: var(--rg-space-8);
    --rg-space-page-section: clamp(var(--rg-space-6), 3vw, var(--rg-space-10));

    /* Material 3 shape scale */
    --m3-shape-none: 0;
    --m3-shape-xs: 4px;
    --m3-shape-s: 8px;
    --m3-shape-m: 12px;
    --m3-shape-l: 16px;
    --m3-shape-l-inc: 20px;
    --m3-shape-xl: 28px;
    --m3-shape-xl-inc: 32px;
    --m3-shape-xxl: 48px;
    --m3-shape-full: 9999px;

    /* Semantic shapes - prefer these in component styles. */
    --rg-shape-control: var(--m3-shape-s);
    --rg-shape-card: 18px;
    --rg-shape-dialog: var(--rg-shape-card);
    --rg-shape-app-icon: var(--m3-shape-l-inc);
    --rg-shape-app-tile: var(--m3-shape-xl);
    --rg-shape-pill: var(--m3-shape-full);

    /* Material motion roles: effects change appearance, spatial moves geometry. */
    --m3-motion-duration-fast: 100ms;
    --m3-motion-duration-short: 150ms;
    --m3-motion-duration-medium: 250ms;
    --rg-motion-duration-spinner: 1.5s;
    --m3-motion-easing-effects: cubic-bezier(0.2, 0, 0, 1);
    --m3-motion-easing-spatial: cubic-bezier(0.05, 0.7, 0.1, 1);
    --m3-motion-duration: var(--m3-motion-duration-short);
    --m3-motion-easing: var(--m3-motion-easing-effects);

    /* Controls and interaction states */
    --rg-control-height-sm: 32px;
    --rg-control-height-md: 40px;
    --rg-control-height-lg: 48px;
    --rg-surface-page: var(--rg-surface-workspace-canvas);
    --rg-surface-container: var(--rg-surface-workspace-panel);
    --rg-surface-container-nested: var(--rg-surface-workspace-canvas);
    --rg-surface-workspace-chrome: var(--mud-palette-appbar-background);
    --rg-surface-workspace-canvas: color-mix(in srgb, var(--mud-palette-background-gray) 58%, var(--mud-palette-background));
    --rg-surface-workspace-panel: var(--rg-surface-workspace-chrome);
    --rg-surface-workspace-panel-muted: color-mix(in srgb, var(--mud-palette-background-gray) 22%, var(--rg-surface-workspace-panel));
    --rg-shadow-workspace-panel-color: rgba(15, 23, 42, 0.3);
    --rg-shadow-workspace-panel: 0 6px 12px -10px var(--rg-shadow-workspace-panel-color);
    --rg-shadow-workspace-drawer: 8px 0 22px -14px var(--rg-shadow-workspace-panel-color);
    --rg-shadow-app-icon: 0 4px 10px -6px rgba(15, 23, 42, 0.28);
    --rg-surface-floating: var(--rg-surface-workspace-chrome);
    --rg-border-floating: 1px solid var(--mud-palette-lines-default);
    --rg-shadow-floating: 0 14px 34px -12px rgba(15, 23, 42, 0.38);
    --rg-surface-raised: var(--rg-surface-container-nested);
    --rg-surface-raised-hover: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--rg-surface-raised));
    --rg-surface-raised-pressed: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--rg-surface-raised));
    /* Neutral controls use translucent state layers so the same ramp separates from the page,
       container, or nested surface underneath it in every theme. */
    --rg-surface-control: color-mix(in srgb, var(--mud-palette-text-primary) 14%, transparent);
    --rg-surface-control-hover: color-mix(in srgb, var(--mud-palette-text-primary) 22%, transparent);
    --rg-surface-control-pressed: color-mix(in srgb, var(--mud-palette-text-primary) 28%, transparent);
    --rg-state-hover: var(--mud-palette-table-hover);
    --rg-state-selected: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface));
    --rg-focus-ring: 2px solid var(--mud-palette-primary);
    --rg-focus-ring-offset: 3px;
    --rg-validation-success: var(--mud-palette-success);
    --rg-validation-error: var(--mud-palette-error);

    /* Status colors. The base value fills a surface and pairs with its --mud-palette-*-text
       contrast color; the -text variant is what a foreground uses. Success, error, and info
       fills clear 4.5:1 on every surface in both modes, so their -text values are plain
       aliases. Warning is the exception: amber cannot darken enough to carry white text
       without turning brown, so the fill stays vivid and the foreground uses its own value. */
    --rg-status-success: var(--mud-palette-success);
    --rg-status-success-text: var(--mud-palette-success);
    --rg-status-warning: var(--mud-palette-warning);
    --rg-status-warning-text: #A14D00;
    --rg-status-error: var(--mud-palette-error);
    --rg-status-error-text: var(--mud-palette-error);
    --rg-status-info: var(--mud-palette-info);
    --rg-status-info-text: var(--mud-palette-info);

    /* Low-emphasis status surfaces, equivalent to a Material 3 *-container role. Translucent
       so one value works over page, container, and nested backdrops in every theme. Carry the
       message in --mud-palette-text-primary and let the icon supply the status hue: colored
       text on a same-hue tint cannot clear 4.5:1 with any usable margin. */
    --rg-status-success-container: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
    --rg-status-warning-container: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent);
    --rg-status-error-container: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
    --rg-status-info-container: color-mix(in srgb, var(--mud-palette-info) 12%, transparent);

    /* Decorative device identity colors. Health and connection state use --rg-status-* above. */
    --rg-device-color-neutral: var(--mud-palette-text-secondary);
    --rg-device-color-green: var(--mud-palette-success);
    --rg-device-color-blue: var(--mud-palette-primary);
    --rg-device-color-teal: color-mix(in srgb, var(--mud-palette-success) 58%, var(--mud-palette-info));
    --rg-device-color-amber: var(--mud-palette-warning);
    --rg-device-color-violet: color-mix(in srgb, var(--mud-palette-primary) 70%, var(--mud-palette-error));

    /* Compatibility aliases for existing styles. */
    --topnav-height: var(--rg-layout-topnav-height);
    --page-gutter: var(--rg-layout-page-gutter);
    --font-base: var(--rg-font-family);
    --nav-font-weight-regular: var(--rg-font-weight-regular);
    --nav-font-weight-medium: var(--rg-font-weight-medium);
    --nav-font-weight-strong: var(--rg-font-weight-strong);
    --sidebar-width: var(--rg-layout-sidebar-width);
    --workspace-header-height: var(--rg-layout-workspace-header-height);
}

/* The dark and OLED amber already clears 4.5:1 as a foreground, so it needs no separate
   value. theme.js sets .dark-mode for both themes before first paint. */
:root.dark-mode {
    --rg-status-warning-text: var(--mud-palette-warning);
    --rg-surface-workspace-canvas: color-mix(in srgb, var(--mud-palette-background-gray) 32%, var(--mud-palette-background));
    --rg-surface-workspace-panel-muted: color-mix(in srgb, var(--mud-palette-background-gray) 64%, var(--mud-palette-background));
    --rg-shadow-workspace-panel-color: rgba(0, 0, 0, 0.75);
    --rg-shadow-app-icon: 0 4px 10px -6px rgba(0, 0, 0, 0.65);
    --rg-shadow-floating: 0 16px 38px -12px rgba(0, 0, 0, 0.88);
}