/* Gavia UI 1.0.0: tokens, reset, button, primitives, theme "gavia". Licenses: LICENSE, fonts/gavia/OFL.txt. */
@layer wl.reset {
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
font-family: var(
--wl-font,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
"Helvetica Neue",
Arial,
"Noto Sans",
sans-serif
);
font-size: 14px;
line-height: 1.45;
color: var(--wl-text, #22252b);
background: var(--wl-bg, #ffffff);
-webkit-font-smoothing: antialiased;
text-rendering: var(--wl-type-text-rendering, optimizeLegibility);
}
button {
font: inherit;
color: inherit;
background: none;
border: none;
cursor: pointer;
}
input,
textarea,
select {
font: inherit;
color: inherit;
}
ul,
ol {
list-style: none;
}
img,
svg {
display: block;
}
a {
color: inherit;
}
:focus {
outline: none;
}
:focus-visible {
outline: 2px solid var(--wl-accent, #2563eb);
outline-offset: 1px;
border-radius: var(--wl-radius-sm, 6px);
}
::selection {
background: var(--wl-accent-soft, #eef3fd);
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background: var(--wl-gray-300, #dcdce1);
border-radius: 6px;
border: 2px solid var(--wl-bg, #ffffff);
}
::-webkit-scrollbar-track {
background: transparent;
}
}
@layer wl.reset, wl.tokens, wl.components;
@layer wl.tokens {
:root {
--wl-gray-0: #ffffff;
--wl-gray-50: #f7f7f8;
--wl-gray-100: #f1f1f3;
--wl-gray-200: #e7e7ea;
--wl-gray-300: #dcdce1;
--wl-gray-400: #b9bdc6;
--wl-gray-500: #9aa0aa;
--wl-gray-600: #5d626c;
--wl-gray-700: #43474f;
--wl-gray-800: #2c2f36;
--wl-gray-900: #22252b;
--wl-gray-950: #17181c;
--wl-blue-50: #eef3fd;
--wl-blue-75: #e2ebfb;
--wl-blue-100: #d3dffa;
--wl-blue-200: #c2d6f7;
--wl-blue-300: #9cbdf0;
--wl-blue-400: #5b8def;
--wl-blue-500: #2563eb;
--wl-blue-600: #1d4fd0;
--wl-blue-700: #1e3f8f;
--wl-blue-800: #172c63;
--wl-blue-900: #101f47;
--wl-green-50: #eaf6f0;
--wl-green-100: #cdeadb;
--wl-green-400: #4cc38a;
--wl-green-500: #2e9e68;
--wl-green-600: #268557;
--wl-green-700: #1c6b47;
--wl-amber-50: #fbf4e2;
--wl-amber-100: #f0dfae;
--wl-amber-400: #e0a93e;
--wl-amber-500: #bf8615;
--wl-amber-600: #a06f0f;
--wl-amber-700: #7d5a0e;
--wl-red-50: #fdeeee;
--wl-red-75: #fbe3e4;
--wl-red-100: #f5d2d3;
--wl-red-400: #e5696e;
--wl-red-500: #d2494f;
--wl-red-600: #c03a40;
--wl-red-700: #8f2f34;
--wl-ink-a06: rgba(20, 22, 28, 0.06);
--wl-ink-a08: rgba(20, 22, 28, 0.08);
--wl-ink-a22: rgba(255, 255, 255, 0.22);
--wl-ink-a35: rgba(255, 255, 255, 0.35);
--wl-radius-sm: 6px;
--wl-radius: 8px;
--wl-radius-lg: 10px;
--wl-radius-xl: 12px;
--wl-radius-full: 999px;
--wl-shadow-card: 0 1px 2px rgba(20, 22, 28, 0.04);
--wl-shadow-pop: 0 4px 14px rgba(20, 22, 28, 0.07), 0 16px 44px rgba(20, 22, 28, 0.11);
--wl-shadow-knob: 0 1px 3px rgba(0, 0, 0, 0.2);
--wl-dur-1: 0.1s;
--wl-dur-2: 0.12s;
--wl-dur-3: 0.15s;
--wl-dur-4: 0.18s;
--wl-dur-5: 0.2s;
--wl-ease: ease;
--wl-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
--wl-font-text-rendering: optimizeLegibility;
--wl-font-heading: var(--wl-font);
--wl-mono: "SF Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
--wl-palette-bg: var(--wl-gray-0);
--wl-palette-bg-raised: var(--wl-palette-bg);
--wl-palette-bg-soft: var(--wl-gray-50);
--wl-palette-bg-hover: var(--wl-gray-100);
--wl-palette-border: var(--wl-gray-200);
--wl-palette-border-2: var(--wl-gray-300);
--wl-palette-text: var(--wl-gray-900);
--wl-palette-text-2: var(--wl-gray-600);
--wl-palette-text-3: var(--wl-gray-500);
--wl-palette-accent: var(--wl-blue-500);
--wl-palette-text-accent: var(--wl-palette-accent);
--wl-palette-accent-hover: var(--wl-blue-600);
--wl-palette-accent-soft: var(--wl-blue-50);
--wl-palette-accent-border: var(--wl-blue-100);
--wl-palette-accent-soft-hover: var(--wl-blue-75);
--wl-palette-accent-border-hover: var(--wl-blue-200);
--wl-palette-on-accent: #ffffff;
--wl-palette-action-primary-bg: var(--wl-palette-accent);
--wl-palette-action-primary-hover: var(--wl-palette-accent-hover);
--wl-palette-action-primary-text: var(--wl-palette-on-accent);
--wl-palette-success: var(--wl-green-500);
--wl-palette-success-soft: var(--wl-green-50);
--wl-palette-success-border: var(--wl-green-100);
--wl-palette-warn: var(--wl-amber-500);
--wl-palette-warn-soft: var(--wl-amber-50);
--wl-palette-warn-border: var(--wl-amber-100);
--wl-palette-danger: var(--wl-red-500);
--wl-palette-danger-hover: var(--wl-red-600);
--wl-palette-danger-soft: var(--wl-red-50);
--wl-palette-danger-soft-hover: var(--wl-red-75);
--wl-palette-danger-border: var(--wl-red-100);
--wl-palette-info-text: var(--wl-blue-700);
--wl-palette-ok-text: var(--wl-green-700);
--wl-palette-warn-text: var(--wl-amber-700);
--wl-palette-err-text: var(--wl-red-700);
--wl-palette-mask-bg: rgba(24, 26, 32, 0.24);
--wl-palette-avatar-bg: var(--wl-gray-800);
--wl-palette-tooltip-bg: #26292f;
--wl-palette-tooltip-text: #ffffff;
--wl-dimension-btn-height: 40px;
--wl-dimension-btn-height-sm: 32px;
--wl-dimension-btn-height-lg: 48px;
--wl-dimension-btn-height-xs: 26px;
--wl-dimension-btn-pad-x: 14px;
--wl-dimension-btn-font-size: 13.5px;
--wl-dimension-input-radius: var(--wl-radius);
--wl-dimension-check-size: 18px;
--wl-dimension-switch-width: 36px;
--wl-dimension-switch-height: 22px;
--wl-dimension-tag-height: 20px;
--wl-dimension-chip-height: 30px;
--wl-dimension-badge-height: 18px;
--wl-dimension-drawer-width: 420px;
--wl-dimension-mask-z: 70;
--wl-dimension-overlay-z: 80;
--wl-dimension-iconbtn-size-sm: 30px;
--wl-dimension-sidebar-width: 68px;
--wl-dimension-sidebar-expanded-width: 228px;
--wl-dimension-sidebar-z: 40;
--wl-dimension-sidebar-mobile-z: 90;
--wl-dimension-menu-width: 230px;
--wl-dimension-popover-width: 280px;
--wl-dimension-command-width: 580px;
--wl-dimension-command-max-height: 420px;
--wl-dimension-command-input-height: 52px;
--wl-dimension-command-z: 90;
--wl-dimension-page-header-gap: 16px;
--wl-dimension-filter-bar-gap: 10px;
--wl-dimension-filter-drawer-width: 380px;
--wl-dimension-filter-z: 90;
--wl-dimension-toast-z: 100;
--wl-dimension-stepper-input-width: 76px;
--wl-dimension-stepper-btn-width: 36px;
--wl-dimension-slider-height: 6px;
--wl-dimension-slider-thumb: 18px;
--wl-dimension-step-num: 24px;
--wl-dimension-table-cell-pad-y: 11px;
--wl-dimension-table-cell-pad-x: 12px;
--wl-dimension-table-head-pad-y: 8px;
--wl-dimension-stat-bar-height: 3px;
--wl-dimension-colorpick-sw: 26px;
--wl-dimension-colorpick-sw-sm: 20px;
--wl-dimension-colorpick-gap: 8px;
--wl-dimension-cal-gap: 5px;
--wl-dimension-cal-day-min-h: 60px;
--wl-dimension-cal-ev-size: 10.5px;
--wl-dimension-dp-day-size: 30px;
--wl-dimension-dp-panel-pad: 12px;
--wl-dimension-upload-drop-pad-y: 26px;
--wl-dimension-upload-drop-pad-x: 20px;
--wl-space-0: 0px;
--wl-space-2: 2px;
--wl-space-4: 4px;
--wl-space-8: 8px;
--wl-space-12: 12px;
--wl-space-16: 16px;
--wl-space-24: 24px;
--wl-space-32: 32px;
--wl-space-48: 48px;
--wl-space-64: 64px;
--wl-font-display-size: 40px;
--wl-font-display-line-height: 48px;
--wl-font-display-weight: 700;
--wl-font-display-family: var(--wl-font-heading);
--wl-font-title-size: 28px;
--wl-font-title-line-height: 36px;
--wl-font-title-weight: 700;
--wl-font-title-family: var(--wl-font-heading);
--wl-font-heading-size: 20px;
--wl-font-heading-line-height: 28px;
--wl-font-heading-weight: 650;
--wl-font-heading-family: var(--wl-font-heading);
--wl-font-subheading-size: 16px;
--wl-font-subheading-line-height: 24px;
--wl-font-subheading-weight: 600;
--wl-font-subheading-family: var(--wl-font-heading);
--wl-font-body-size: 14px;
--wl-font-body-line-height: 20px;
--wl-font-body-weight: 400;
--wl-font-body-family: var(--wl-font);
--wl-font-small-size: 12px;
--wl-font-small-line-height: 18px;
--wl-font-small-weight: 400;
--wl-font-small-family: var(--wl-font);
--wl-font-label-size: 13px;
--wl-font-label-line-height: 20px;
--wl-font-label-weight: 500;
--wl-font-label-family: var(--wl-font);
--wl-font-code-size: 12px;
--wl-font-code-line-height: 18px;
--wl-font-code-weight: 400;
--wl-font-code-family: var(--wl-mono);
--wl-size-page-max: 1240px;
--wl-size-reading-max: 72ch;
--wl-size-grid-min: 240px;
--wl-z-base: 0;
--wl-z-sticky: 50;
--wl-palette-action-primary-active: var(--wl-palette-action-primary-hover);
--wl-palette-accent-warm: var(--wl-palette-warn);
--wl-palette-accent-warm-soft: var(--wl-palette-warn-soft);
--wl-dimension-btn-radius: var(--wl-radius);
--wl-dimension-btn-radius-sm: var(--wl-radius-sm);
--wl-dimension-btn-radius-lg: var(--wl-radius-lg);
--wl-type-text-rendering: var(--wl-font-text-rendering);
--wl-bg: var(--wl-palette-bg);
--wl-bg-raised: var(--wl-palette-bg-raised);
--wl-bg-soft: var(--wl-palette-bg-soft);
--wl-bg-hover: var(--wl-palette-bg-hover);
--wl-border: var(--wl-palette-border);
--wl-border-2: var(--wl-palette-border-2);
--wl-text: var(--wl-palette-text);
--wl-text-accent: var(--wl-palette-text-accent);
--wl-text-accent-hover: var(--wl-palette-accent-hover);
--wl-text-2: var(--wl-palette-text-2);
--wl-text-3: var(--wl-palette-text-3);
--wl-accent: var(--wl-palette-accent);
--wl-accent-hover: var(--wl-palette-accent-hover);
--wl-accent-soft: var(--wl-palette-accent-soft);
--wl-accent-border: var(--wl-palette-accent-border);
--wl-accent-soft-hover: var(--wl-palette-accent-soft-hover);
--wl-accent-border-hover: var(--wl-palette-accent-border-hover);
--wl-on-accent: var(--wl-palette-on-accent);
--wl-success: var(--wl-palette-success);
--wl-success-soft: var(--wl-palette-success-soft);
--wl-success-border: var(--wl-palette-success-border);
--wl-warn: var(--wl-palette-warn);
--wl-warn-soft: var(--wl-palette-warn-soft);
--wl-warn-border: var(--wl-palette-warn-border);
--wl-danger: var(--wl-palette-danger);
--wl-danger-hover: var(--wl-palette-danger-hover);
--wl-danger-soft: var(--wl-palette-danger-soft);
--wl-danger-soft-hover: var(--wl-palette-danger-soft-hover);
--wl-danger-border: var(--wl-palette-danger-border);
--wl-info-text: var(--wl-palette-info-text);
--wl-ok-text: var(--wl-palette-ok-text);
--wl-warn-text: var(--wl-palette-warn-text);
--wl-err-text: var(--wl-palette-err-text);
--wl-mask-bg: var(--wl-palette-mask-bg);
--wl-avatar-bg: var(--wl-palette-avatar-bg);
--wl-tooltip-bg: var(--wl-palette-tooltip-bg);
--wl-tooltip-text: var(--wl-palette-tooltip-text);
--wl-control-height-md: var(--wl-dimension-btn-height);
--wl-control-height-sm: var(--wl-dimension-btn-height-sm);
--wl-control-height-lg: var(--wl-dimension-btn-height-lg);
--wl-control-height-xs: var(--wl-dimension-btn-height-xs);
--wl-corner-control: var(--wl-radius);
--wl-corner-control-sm: var(--wl-radius-sm);
--wl-control-padding-inline: var(--wl-dimension-btn-pad-x);
--wl-type-control-size: var(--wl-dimension-btn-font-size);
--wl-corner-input: var(--wl-dimension-input-radius);
--wl-focus-shadow: 0 0 0 3px var(--wl-accent-soft);
--wl-focus-invalid-shadow: 0 0 0 3px var(--wl-danger-soft);
--wl-metric-check-size: var(--wl-dimension-check-size);
--wl-metric-switch-width: var(--wl-dimension-switch-width);
--wl-metric-switch-height: var(--wl-dimension-switch-height);
--wl-metric-tag-height: var(--wl-dimension-tag-height);
--wl-metric-chip-height: var(--wl-dimension-chip-height);
--wl-metric-badge-height: var(--wl-dimension-badge-height);
--wl-corner-surface: var(--wl-radius);
--wl-corner-overlay: var(--wl-radius-xl);
--wl-layout-drawer-width: var(--wl-dimension-drawer-width);
--wl-layer-mask: var(--wl-dimension-mask-z);
--wl-layer-popover: var(--wl-dimension-overlay-z);
--wl-metric-iconbtn-size-sm: var(--wl-dimension-iconbtn-size-sm);
--wl-metric-sidebar-width: var(--wl-dimension-sidebar-width);
--wl-metric-sidebar-expanded-width: var(--wl-dimension-sidebar-expanded-width);
--wl-layer-navigation: var(--wl-dimension-sidebar-z);
--wl-layer-navigation-modal: var(--wl-dimension-sidebar-mobile-z);
--wl-metric-segmented-shadow: 0 1px 2px var(--wl-ink-a08);
--wl-layout-menu-width: var(--wl-dimension-menu-width);
--wl-layout-popover-width: var(--wl-dimension-popover-width);
--wl-layout-command-width: var(--wl-dimension-command-width);
--wl-metric-command-max-height: var(--wl-dimension-command-max-height);
--wl-metric-command-input-height: var(--wl-dimension-command-input-height);
--wl-layer-command: var(--wl-dimension-command-z);
--wl-metric-page-header-gap: var(--wl-dimension-page-header-gap);
--wl-metric-filter-bar-gap: var(--wl-dimension-filter-bar-gap);
--wl-metric-filter-drawer-width: var(--wl-dimension-filter-drawer-width);
--wl-layer-filter: var(--wl-dimension-filter-z);
--wl-layer-toast: var(--wl-dimension-toast-z);
--wl-status-info-icon: var(--wl-blue-300);
--wl-status-success-icon: var(--wl-green-400);
--wl-status-warning-icon: var(--wl-amber-400);
--wl-status-danger-icon: var(--wl-red-400);
--wl-metric-stepper-input-width: var(--wl-dimension-stepper-input-width);
--wl-metric-stepper-btn-width: var(--wl-dimension-stepper-btn-width);
--wl-metric-slider-height: var(--wl-dimension-slider-height);
--wl-metric-slider-thumb: var(--wl-dimension-slider-thumb);
--wl-metric-step-num: var(--wl-dimension-step-num);
--wl-metric-table-cell-pad-y: var(--wl-dimension-table-cell-pad-y);
--wl-metric-table-cell-pad-x: var(--wl-dimension-table-cell-pad-x);
--wl-metric-table-head-pad-y: var(--wl-dimension-table-head-pad-y);
--wl-metric-stat-bar-height: var(--wl-dimension-stat-bar-height);
--wl-metric-colorpick-sw: var(--wl-dimension-colorpick-sw);
--wl-metric-colorpick-sw-sm: var(--wl-dimension-colorpick-sw-sm);
--wl-metric-colorpick-gap: var(--wl-dimension-colorpick-gap);
--wl-metric-cal-gap: var(--wl-dimension-cal-gap);
--wl-metric-cal-day-min-h: var(--wl-dimension-cal-day-min-h);
--wl-metric-cal-ev-size: var(--wl-dimension-cal-ev-size);
--wl-metric-dp-day-size: var(--wl-dimension-dp-day-size);
--wl-metric-dp-panel-pad: var(--wl-dimension-dp-panel-pad);
--wl-metric-upload-drop-pad-y: var(--wl-dimension-upload-drop-pad-y);
--wl-metric-upload-drop-pad-x: var(--wl-dimension-upload-drop-pad-x);
--wl-space-none: var(--wl-space-0);
--wl-space-2xs: var(--wl-space-2);
--wl-space-xs: var(--wl-space-4);
--wl-space-sm: var(--wl-space-8);
--wl-space-md: var(--wl-space-12);
--wl-space-lg: var(--wl-space-16);
--wl-space-xl: var(--wl-space-24);
--wl-space-2xl: var(--wl-space-32);
--wl-space-3xl: var(--wl-space-48);
--wl-space-4xl: var(--wl-space-64);
--wl-type-display-size: var(--wl-font-display-size);
--wl-type-display-line-height: var(--wl-font-display-line-height);
--wl-type-display-weight: var(--wl-font-display-weight);
--wl-type-display-family: var(--wl-font-display-family);
--wl-type-title-size: var(--wl-font-title-size);
--wl-type-title-line-height: var(--wl-font-title-line-height);
--wl-type-title-weight: var(--wl-font-title-weight);
--wl-type-title-family: var(--wl-font-title-family);
--wl-type-heading-size: var(--wl-font-heading-size);
--wl-type-heading-line-height: var(--wl-font-heading-line-height);
--wl-type-heading-weight: var(--wl-font-heading-weight);
--wl-type-heading-family: var(--wl-font-heading-family);
--wl-type-subheading-size: var(--wl-font-subheading-size);
--wl-type-subheading-line-height: var(--wl-font-subheading-line-height);
--wl-type-subheading-weight: var(--wl-font-subheading-weight);
--wl-type-subheading-family: var(--wl-font-subheading-family);
--wl-type-body-size: var(--wl-font-body-size);
--wl-type-body-line-height: var(--wl-font-body-line-height);
--wl-type-body-weight: var(--wl-font-body-weight);
--wl-type-body-family: var(--wl-font-body-family);
--wl-type-small-size: var(--wl-font-small-size);
--wl-type-small-line-height: var(--wl-font-small-line-height);
--wl-type-small-weight: var(--wl-font-small-weight);
--wl-type-small-family: var(--wl-font-small-family);
--wl-type-label-size: var(--wl-font-label-size);
--wl-type-label-line-height: var(--wl-font-label-line-height);
--wl-type-label-weight: var(--wl-font-label-weight);
--wl-type-label-family: var(--wl-font-label-family);
--wl-type-code-size: var(--wl-font-code-size);
--wl-type-code-line-height: var(--wl-font-code-line-height);
--wl-type-code-weight: var(--wl-font-code-weight);
--wl-type-code-family: var(--wl-font-code-family);
--wl-text-muted: var(--wl-text-2);
--wl-focus-color: var(--wl-accent);
--wl-focus-invalid-color: var(--wl-danger-hover);
--wl-text-danger: var(--wl-err-text);
--wl-action-primary-bg: var(--wl-accent);
--wl-action-primary-hover: var(--wl-accent-hover);
--wl-action-primary-text: var(--wl-on-accent);
--wl-action-danger-bg: var(--wl-danger-hover);
--wl-action-danger-hover: var(--wl-red-700);
--wl-action-danger-text: var(--wl-on-accent);
--wl-layout-page-max: var(--wl-size-page-max);
--wl-layout-page-gutter: var(--wl-space-xl);
--wl-layout-grid-gap: var(--wl-space-lg);
--wl-elevation-surface: var(--wl-shadow-card);
--wl-elevation-floating: var(--wl-shadow-pop);
--wl-motion-fast: var(--wl-dur-2);
--wl-motion-normal: var(--wl-dur-4);
--wl-motion-slow: var(--wl-dur-5);
--wl-motion-ease: var(--wl-ease);
--wl-layout-reading-max: var(--wl-size-reading-max);
--wl-layout-grid-min: var(--wl-size-grid-min);
--wl-layer-base: var(--wl-z-base);
--wl-layer-sticky: var(--wl-z-sticky);
--wl-action-primary-active: var(--wl-action-primary-hover);
--wl-accent-warm: var(--wl-palette-accent-warm);
--wl-accent-warm-soft: var(--wl-palette-accent-warm-soft);
--wl-corner-button: var(--wl-dimension-btn-radius);
--wl-corner-button-sm: var(--wl-dimension-btn-radius-sm);
--wl-corner-button-lg: var(--wl-dimension-btn-radius-lg);
--wl-btn-height: var(--wl-control-height-md);
--wl-btn-height-sm: var(--wl-control-height-sm);
--wl-btn-height-lg: var(--wl-control-height-lg);
--wl-btn-height-xs: var(--wl-control-height-xs);
--wl-btn-radius: var(--wl-corner-control);
--wl-btn-radius-sm: var(--wl-corner-control-sm);
--wl-btn-pad-x: var(--wl-control-padding-inline);
--wl-btn-font-size: var(--wl-type-control-size);
--wl-input-height: var(--wl-control-height-md);
--wl-input-height-sm: var(--wl-control-height-sm);
--wl-input-height-lg: var(--wl-control-height-lg);
--wl-input-radius: var(--wl-corner-input);
--wl-input-font-size: var(--wl-type-control-size);
--wl-focus-ring: var(--wl-focus-shadow);
--wl-focus-ring-danger: var(--wl-focus-invalid-shadow);
--wl-check-size: var(--wl-metric-check-size);
--wl-switch-width: var(--wl-metric-switch-width);
--wl-switch-height: var(--wl-metric-switch-height);
--wl-tag-height: var(--wl-metric-tag-height);
--wl-chip-height: var(--wl-metric-chip-height);
--wl-badge-height: var(--wl-metric-badge-height);
--wl-card-radius: var(--wl-corner-surface);
--wl-dialog-radius: var(--wl-corner-overlay);
--wl-drawer-width: var(--wl-layout-drawer-width);
--wl-mask-z: var(--wl-layer-mask);
--wl-overlay-z: var(--wl-layer-popover);
--wl-iconbtn-size: var(--wl-control-height-md);
--wl-iconbtn-size-sm: var(--wl-metric-iconbtn-size-sm);
--wl-nav-item-height: var(--wl-control-height-md);
--wl-sidebar-width: var(--wl-metric-sidebar-width);
--wl-sidebar-expanded-width: var(--wl-metric-sidebar-expanded-width);
--wl-sidebar-z: var(--wl-layer-navigation);
--wl-sidebar-mobile-z: var(--wl-layer-navigation-modal);
--wl-segmented-shadow: var(--wl-metric-segmented-shadow);
--wl-menu-width: var(--wl-layout-menu-width);
--wl-popover-width: var(--wl-layout-popover-width);
--wl-command-width: var(--wl-layout-command-width);
--wl-command-max-height: var(--wl-metric-command-max-height);
--wl-command-input-height: var(--wl-metric-command-input-height);
--wl-command-z: var(--wl-layer-command);
--wl-page-header-gap: var(--wl-metric-page-header-gap);
--wl-filter-bar-gap: var(--wl-metric-filter-bar-gap);
--wl-filter-drawer-width: var(--wl-metric-filter-drawer-width);
--wl-filter-z: var(--wl-layer-filter);
--wl-toast-z: var(--wl-layer-toast);
--wl-toast-icon-info: var(--wl-status-info-icon);
--wl-toast-icon-ok: var(--wl-status-success-icon);
--wl-toast-icon-warn: var(--wl-status-warning-icon);
--wl-toast-icon-err: var(--wl-status-danger-icon);
--wl-stepper-input-width: var(--wl-metric-stepper-input-width);
--wl-stepper-btn-width: var(--wl-metric-stepper-btn-width);
--wl-slider-height: var(--wl-metric-slider-height);
--wl-slider-thumb: var(--wl-metric-slider-thumb);
--wl-step-num: var(--wl-metric-step-num);
--wl-table-cell-pad-y: var(--wl-metric-table-cell-pad-y);
--wl-table-cell-pad-x: var(--wl-metric-table-cell-pad-x);
--wl-table-head-pad-y: var(--wl-metric-table-head-pad-y);
--wl-stat-bar-height: var(--wl-metric-stat-bar-height);
--wl-colorpick-sw: var(--wl-metric-colorpick-sw);
--wl-colorpick-sw-sm: var(--wl-metric-colorpick-sw-sm);
--wl-colorpick-gap: var(--wl-metric-colorpick-gap);
--wl-cal-gap: var(--wl-metric-cal-gap);
--wl-cal-day-min-h: var(--wl-metric-cal-day-min-h);
--wl-cal-ev-size: var(--wl-metric-cal-ev-size);
--wl-dp-day-size: var(--wl-metric-dp-day-size);
--wl-dp-panel-pad: var(--wl-metric-dp-panel-pad);
--wl-upload-drop-pad-y: var(--wl-metric-upload-drop-pad-y);
--wl-upload-drop-pad-x: var(--wl-metric-upload-drop-pad-x);
--wl-btn-radius-lg: var(--wl-corner-button-lg);
}
}
@layer wl.tokens {
@media (prefers-reduced-motion: reduce) {
:root {
--wl-dur-1: 0.01ms;
--wl-dur-2: 0.01ms;
--wl-dur-3: 0.01ms;
--wl-dur-4: 0.01ms;
--wl-dur-5: 0.01ms;
}
}
}
@layer wl.components {
.wl-btn {
height: var(--wl-btn-height);
padding: 0 var(--wl-btn-pad-x);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid var(--wl-border);
border-radius: var(--wl-btn-radius);
font-size: var(--wl-btn-font-size);
font-weight: 500;
color: var(--wl-text);
background: var(--wl-bg);
transition: background var(--wl-motion-fast), border-color var(--wl-motion-fast), color var(--wl-motion-fast);
white-space: nowrap;
user-select: none;
vertical-align: middle;
}
.wl-btn:hover {
background: var(--wl-bg-soft);
border-color: var(--wl-border-2);
}
.wl-btn:active {
background: var(--wl-bg-hover);
}
.wl-btn--primary {
background: var(--wl-action-primary-bg);
border-color: var(--wl-action-primary-bg);
color: var(--wl-action-primary-text);
}
.wl-btn--primary:hover {
background: var(--wl-action-primary-hover);
border-color: var(--wl-action-primary-hover);
}
.wl-btn--primary:where(:not(:disabled):not(.is-disabled):not(.is-loading)):active {
background: var(--wl-action-primary-active);
border-color: var(--wl-action-primary-active);
}
}
@layer wl.tokens {
[data-wl-theme="gavia"] {
color-scheme: light;
text-rendering: var(--wl-type-text-rendering);
--wl-gray-0: #fefdfb;
--wl-gray-50: #faf9f6;
--wl-gray-100: #eef2f3;
--wl-gray-200: #d5dfe3;
--wl-gray-300: #b8c7ce;
--wl-gray-400: #94a3ae;
--wl-gray-500: #75818c;
--wl-gray-600: #5b6470;
--wl-gray-700: #3e4d59;
--wl-gray-800: #253540;
--wl-gray-900: #0f1a23;
--wl-gray-950: #091219;
--wl-blue-50: #eef3fd;
--wl-blue-75: #e2ebfb;
--wl-blue-100: #d3dffa;
--wl-blue-200: #c2d6f7;
--wl-blue-300: #9cbdf0;
--wl-blue-400: #5b8def;
--wl-blue-500: #2563eb;
--wl-blue-600: #1d4fd0;
--wl-blue-700: #1e3f8f;
--wl-blue-800: #172c63;
--wl-blue-900: #101f47;
--wl-green-50: #eaf6f0;
--wl-green-100: #cdeadb;
--wl-green-400: #4cc38a;
--wl-green-500: #2e9e68;
--wl-green-600: #268557;
--wl-green-700: #1c6b47;
--wl-amber-50: #fbf4e2;
--wl-amber-100: #f0dfae;
--wl-amber-400: #e0a93e;
--wl-amber-500: #bf8615;
--wl-amber-600: #a06f0f;
--wl-amber-700: #7d5a0e;
--wl-red-50: #fdeeee;
--wl-red-75: #fbe3e4;
--wl-red-100: #f5d2d3;
--wl-red-400: #e5696e;
--wl-red-500: #d2494f;
--wl-red-600: #c03a40;
--wl-red-700: #8f2f34;
--wl-ink-a06: rgba(20, 22, 28, 0.06);
--wl-ink-a08: rgba(20, 22, 28, 0.08);
--wl-ink-a22: rgba(255, 255, 255, 0.22);
--wl-ink-a35: rgba(255, 255, 255, 0.35);
--wl-radius-sm: 6px;
--wl-radius: 8px;
--wl-radius-lg: 10px;
--wl-radius-xl: 12px;
--wl-radius-full: 999px;
--wl-shadow-card: 0 1px 3px rgba(15, 26, 35, 0.05);
--wl-shadow-pop: 0 4px 14px rgba(15, 26, 35, 0.08), 0 16px 44px rgba(15, 26, 35, 0.12);
--wl-shadow-knob: 0 1px 3px rgba(15, 26, 35, 0.2);
--wl-dur-1: 0.1s;
--wl-dur-2: 0.12s;
--wl-dur-3: 0.15s;
--wl-dur-4: 0.18s;
--wl-dur-5: 0.2s;
--wl-ease: ease;
--wl-font: "Gavia Sans Core", "Gavia Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
--wl-font-text-rendering: geometricPrecision;
--wl-font-heading: var(--wl-font);
--wl-mono: "SF Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
--wl-type-text-rendering: var(--wl-font-text-rendering);
--wl-bg: var(--wl-palette-bg);
--wl-bg-raised: var(--wl-palette-bg-raised);
--wl-bg-soft: var(--wl-palette-bg-soft);
--wl-bg-hover: var(--wl-palette-bg-hover);
--wl-border: var(--wl-palette-border);
--wl-border-2: var(--wl-palette-border-2);
--wl-text: var(--wl-palette-text);
--wl-text-accent: var(--wl-palette-text-accent);
--wl-text-accent-hover: var(--wl-palette-accent-hover);
--wl-text-2: var(--wl-palette-text-2);
--wl-text-3: var(--wl-palette-text-3);
--wl-accent: var(--wl-palette-accent);
--wl-accent-hover: var(--wl-palette-accent-hover);
--wl-accent-soft: var(--wl-palette-accent-soft);
--wl-accent-border: var(--wl-palette-accent-border);
--wl-accent-soft-hover: var(--wl-palette-accent-soft-hover);
--wl-accent-border-hover: var(--wl-palette-accent-border-hover);
--wl-on-accent: var(--wl-palette-on-accent);
--wl-success: var(--wl-palette-success);
--wl-success-soft: var(--wl-palette-success-soft);
--wl-success-border: var(--wl-palette-success-border);
--wl-warn: var(--wl-palette-warn);
--wl-warn-soft: var(--wl-palette-warn-soft);
--wl-warn-border: var(--wl-palette-warn-border);
--wl-danger: var(--wl-palette-danger);
--wl-danger-hover: var(--wl-palette-danger-hover);
--wl-danger-soft: var(--wl-palette-danger-soft);
--wl-danger-soft-hover: var(--wl-palette-danger-soft-hover);
--wl-danger-border: var(--wl-palette-danger-border);
--wl-info-text: var(--wl-palette-info-text);
--wl-ok-text: var(--wl-palette-ok-text);
--wl-warn-text: var(--wl-palette-warn-text);
--wl-err-text: var(--wl-palette-err-text);
--wl-mask-bg: var(--wl-palette-mask-bg);
--wl-avatar-bg: var(--wl-palette-avatar-bg);
--wl-tooltip-bg: var(--wl-palette-tooltip-bg);
--wl-tooltip-text: var(--wl-palette-tooltip-text);
--wl-btn-height: var(--wl-control-height-md);
--wl-btn-height-sm: var(--wl-control-height-sm);
--wl-btn-height-lg: var(--wl-control-height-lg);
--wl-btn-height-xs: var(--wl-control-height-xs);
--wl-btn-radius: var(--wl-corner-button);
--wl-btn-radius-sm: var(--wl-corner-button-sm);
--wl-btn-pad-x: var(--wl-control-padding-inline);
--wl-btn-font-size: var(--wl-type-control-size);
--wl-input-height: var(--wl-control-height-md);
--wl-input-height-sm: var(--wl-control-height-sm);
--wl-input-height-lg: var(--wl-control-height-lg);
--wl-input-radius: var(--wl-corner-input);
--wl-input-font-size: var(--wl-type-control-size);
--wl-focus-ring: var(--wl-focus-shadow);
--wl-focus-ring-danger: var(--wl-focus-invalid-shadow);
--wl-check-size: var(--wl-metric-check-size);
--wl-switch-width: var(--wl-metric-switch-width);
--wl-switch-height: var(--wl-metric-switch-height);
--wl-tag-height: var(--wl-metric-tag-height);
--wl-chip-height: var(--wl-metric-chip-height);
--wl-badge-height: var(--wl-metric-badge-height);
--wl-card-radius: var(--wl-corner-surface);
--wl-dialog-radius: var(--wl-corner-overlay);
--wl-drawer-width: var(--wl-layout-drawer-width);
--wl-mask-z: var(--wl-layer-mask);
--wl-overlay-z: var(--wl-layer-popover);
--wl-iconbtn-size: var(--wl-control-height-md);
--wl-iconbtn-size-sm: var(--wl-metric-iconbtn-size-sm);
--wl-nav-item-height: var(--wl-control-height-md);
--wl-sidebar-width: var(--wl-metric-sidebar-width);
--wl-sidebar-expanded-width: var(--wl-metric-sidebar-expanded-width);
--wl-sidebar-z: var(--wl-layer-navigation);
--wl-sidebar-mobile-z: var(--wl-layer-navigation-modal);
--wl-segmented-shadow: var(--wl-metric-segmented-shadow);
--wl-menu-width: var(--wl-layout-menu-width);
--wl-popover-width: var(--wl-layout-popover-width);
--wl-command-width: var(--wl-layout-command-width);
--wl-command-max-height: var(--wl-metric-command-max-height);
--wl-command-input-height: var(--wl-metric-command-input-height);
--wl-command-z: var(--wl-layer-command);
--wl-page-header-gap: var(--wl-metric-page-header-gap);
--wl-filter-bar-gap: var(--wl-metric-filter-bar-gap);
--wl-filter-drawer-width: var(--wl-metric-filter-drawer-width);
--wl-filter-z: var(--wl-layer-filter);
--wl-toast-z: var(--wl-layer-toast);
--wl-toast-icon-info: var(--wl-status-info-icon);
--wl-toast-icon-ok: var(--wl-status-success-icon);
--wl-toast-icon-warn: var(--wl-status-warning-icon);
--wl-toast-icon-err: var(--wl-status-danger-icon);
--wl-stepper-input-width: var(--wl-metric-stepper-input-width);
--wl-stepper-btn-width: var(--wl-metric-stepper-btn-width);
--wl-slider-height: var(--wl-metric-slider-height);
--wl-slider-thumb: var(--wl-metric-slider-thumb);
--wl-step-num: var(--wl-metric-step-num);
--wl-table-cell-pad-y: var(--wl-metric-table-cell-pad-y);
--wl-table-cell-pad-x: var(--wl-metric-table-cell-pad-x);
--wl-table-head-pad-y: var(--wl-metric-table-head-pad-y);
--wl-stat-bar-height: var(--wl-metric-stat-bar-height);
--wl-colorpick-sw: var(--wl-metric-colorpick-sw);
--wl-colorpick-sw-sm: var(--wl-metric-colorpick-sw-sm);
--wl-colorpick-gap: var(--wl-metric-colorpick-gap);
--wl-cal-gap: var(--wl-metric-cal-gap);
--wl-cal-day-min-h: var(--wl-metric-cal-day-min-h);
--wl-cal-ev-size: var(--wl-metric-cal-ev-size);
--wl-dp-day-size: var(--wl-metric-dp-day-size);
--wl-dp-panel-pad: var(--wl-metric-dp-panel-pad);
--wl-upload-drop-pad-y: var(--wl-metric-upload-drop-pad-y);
--wl-upload-drop-pad-x: var(--wl-metric-upload-drop-pad-x);
--wl-palette-bg: #faf9f6;
--wl-palette-bg-raised: #fefdfb;
--wl-palette-bg-soft: #eef2f3;
--wl-palette-bg-hover: #e5ecef;
--wl-palette-border: #d5dfe3;
--wl-palette-border-2: #b8c7ce;
--wl-palette-text: #0f1a23;
--wl-palette-text-2: #5b6470;
--wl-palette-text-3: #75818c;
--wl-palette-accent: #3c7490;
--wl-palette-text-accent: #326179;
--wl-palette-accent-hover: #326179;
--wl-palette-accent-soft: #dfe8eb;
--wl-palette-accent-border: #b8cbd3;
--wl-palette-accent-soft-hover: #d3dfe4;
--wl-palette-accent-border-hover: #9eb7c2;
--wl-palette-on-accent: #ffffff;
--wl-palette-action-primary-bg: #3c7490;
--wl-palette-action-primary-hover: #376b84;
--wl-palette-action-primary-text: #ffffff;
--wl-palette-success: var(--wl-green-500);
--wl-palette-success-soft: var(--wl-green-50);
--wl-palette-success-border: var(--wl-green-100);
--wl-palette-warn: var(--wl-amber-500);
--wl-palette-warn-soft: var(--wl-amber-50);
--wl-palette-warn-border: var(--wl-amber-100);
--wl-palette-danger: #ab4448;
--wl-palette-danger-hover: #963c3f;
--wl-palette-danger-soft: #f7eeed;
--wl-palette-danger-soft-hover: #f3e5e4;
--wl-palette-danger-border: #e5c6c5;
--wl-palette-info-text: var(--wl-blue-700);
--wl-palette-ok-text: var(--wl-green-700);
--wl-palette-warn-text: var(--wl-amber-700);
--wl-palette-err-text: #ab4448;
--wl-palette-mask-bg: rgba(15, 26, 35, 0.28);
--wl-palette-avatar-bg: var(--wl-gray-800);
--wl-palette-tooltip-bg: var(--wl-gray-900);
--wl-palette-tooltip-text: #ffffff;
--wl-control-height-md: var(--wl-dimension-btn-height);
--wl-dimension-btn-height: 40px;
--wl-control-height-sm: var(--wl-dimension-btn-height-sm);
--wl-dimension-btn-height-sm: 32px;
--wl-control-height-lg: var(--wl-dimension-btn-height-lg);
--wl-dimension-btn-height-lg: 48px;
--wl-control-height-xs: var(--wl-dimension-btn-height-xs);
--wl-dimension-btn-height-xs: 26px;
--wl-corner-control: var(--wl-radius);
--wl-corner-control-sm: var(--wl-radius-sm);
--wl-control-padding-inline: var(--wl-dimension-btn-pad-x);
--wl-dimension-btn-pad-x: 14px;
--wl-type-control-size: var(--wl-dimension-btn-font-size);
--wl-dimension-btn-font-size: 13.5px;
--wl-corner-input: var(--wl-dimension-input-radius);
--wl-dimension-input-radius: 6px;
--wl-focus-shadow: 0 0 0 3px var(--wl-accent-soft);
--wl-focus-invalid-shadow: 0 0 0 3px var(--wl-danger-soft);
--wl-metric-check-size: var(--wl-dimension-check-size);
--wl-dimension-check-size: 18px;
--wl-metric-switch-width: var(--wl-dimension-switch-width);
--wl-dimension-switch-width: 36px;
--wl-metric-switch-height: var(--wl-dimension-switch-height);
--wl-dimension-switch-height: 22px;
--wl-metric-tag-height: var(--wl-dimension-tag-height);
--wl-dimension-tag-height: 20px;
--wl-metric-chip-height: var(--wl-dimension-chip-height);
--wl-dimension-chip-height: 30px;
--wl-metric-badge-height: var(--wl-dimension-badge-height);
--wl-dimension-badge-height: 18px;
--wl-corner-surface: var(--wl-radius);
--wl-corner-overlay: var(--wl-radius-xl);
--wl-layout-drawer-width: var(--wl-dimension-drawer-width);
--wl-dimension-drawer-width: 420px;
--wl-layer-mask: var(--wl-dimension-mask-z);
--wl-dimension-mask-z: 70;
--wl-layer-popover: var(--wl-dimension-overlay-z);
--wl-dimension-overlay-z: 80;
--wl-metric-iconbtn-size-sm: var(--wl-dimension-iconbtn-size-sm);
--wl-dimension-iconbtn-size-sm: 30px;
--wl-metric-sidebar-width: var(--wl-dimension-sidebar-width);
--wl-dimension-sidebar-width: 68px;
--wl-metric-sidebar-expanded-width: var(--wl-dimension-sidebar-expanded-width);
--wl-dimension-sidebar-expanded-width: 228px;
--wl-layer-navigation: var(--wl-dimension-sidebar-z);
--wl-dimension-sidebar-z: 40;
--wl-layer-navigation-modal: var(--wl-dimension-sidebar-mobile-z);
--wl-dimension-sidebar-mobile-z: 90;
--wl-metric-segmented-shadow: 0 1px 2px var(--wl-ink-a08);
--wl-layout-menu-width: var(--wl-dimension-menu-width);
--wl-dimension-menu-width: 230px;
--wl-layout-popover-width: var(--wl-dimension-popover-width);
--wl-dimension-popover-width: 280px;
--wl-layout-command-width: var(--wl-dimension-command-width);
--wl-dimension-command-width: 580px;
--wl-metric-command-max-height: var(--wl-dimension-command-max-height);
--wl-dimension-command-max-height: 420px;
--wl-metric-command-input-height: var(--wl-dimension-command-input-height);
--wl-dimension-command-input-height: 52px;
--wl-layer-command: var(--wl-dimension-command-z);
--wl-dimension-command-z: 90;
--wl-metric-page-header-gap: var(--wl-dimension-page-header-gap);
--wl-dimension-page-header-gap: 16px;
--wl-metric-filter-bar-gap: var(--wl-dimension-filter-bar-gap);
--wl-dimension-filter-bar-gap: 10px;
--wl-metric-filter-drawer-width: var(--wl-dimension-filter-drawer-width);
--wl-dimension-filter-drawer-width: 380px;
--wl-layer-filter: var(--wl-dimension-filter-z);
--wl-dimension-filter-z: 90;
--wl-layer-toast: var(--wl-dimension-toast-z);
--wl-dimension-toast-z: 100;
--wl-status-info-icon: var(--wl-blue-300);
--wl-status-success-icon: var(--wl-green-400);
--wl-status-warning-icon: var(--wl-amber-400);
--wl-status-danger-icon: var(--wl-palette-danger);
--wl-metric-stepper-input-width: var(--wl-dimension-stepper-input-width);
--wl-dimension-stepper-input-width: 76px;
--wl-metric-stepper-btn-width: var(--wl-dimension-stepper-btn-width);
--wl-dimension-stepper-btn-width: 36px;
--wl-metric-slider-height: var(--wl-dimension-slider-height);
--wl-dimension-slider-height: 6px;
--wl-metric-slider-thumb: var(--wl-dimension-slider-thumb);
--wl-dimension-slider-thumb: 18px;
--wl-metric-step-num: var(--wl-dimension-step-num);
--wl-dimension-step-num: 24px;
--wl-metric-table-cell-pad-y: var(--wl-dimension-table-cell-pad-y);
--wl-dimension-table-cell-pad-y: 11px;
--wl-metric-table-cell-pad-x: var(--wl-dimension-table-cell-pad-x);
--wl-dimension-table-cell-pad-x: 12px;
--wl-metric-table-head-pad-y: var(--wl-dimension-table-head-pad-y);
--wl-dimension-table-head-pad-y: 8px;
--wl-metric-stat-bar-height: var(--wl-dimension-stat-bar-height);
--wl-dimension-stat-bar-height: 3px;
--wl-metric-colorpick-sw: var(--wl-dimension-colorpick-sw);
--wl-dimension-colorpick-sw: 26px;
--wl-metric-colorpick-sw-sm: var(--wl-dimension-colorpick-sw-sm);
--wl-dimension-colorpick-sw-sm: 20px;
--wl-metric-colorpick-gap: var(--wl-dimension-colorpick-gap);
--wl-dimension-colorpick-gap: 8px;
--wl-metric-cal-gap: var(--wl-dimension-cal-gap);
--wl-dimension-cal-gap: 5px;
--wl-metric-cal-day-min-h: var(--wl-dimension-cal-day-min-h);
--wl-dimension-cal-day-min-h: 60px;
--wl-metric-cal-ev-size: var(--wl-dimension-cal-ev-size);
--wl-dimension-cal-ev-size: 10.5px;
--wl-metric-dp-day-size: var(--wl-dimension-dp-day-size);
--wl-dimension-dp-day-size: 30px;
--wl-metric-dp-panel-pad: var(--wl-dimension-dp-panel-pad);
--wl-dimension-dp-panel-pad: 12px;
--wl-metric-upload-drop-pad-y: var(--wl-dimension-upload-drop-pad-y);
--wl-dimension-upload-drop-pad-y: 26px;
--wl-metric-upload-drop-pad-x: var(--wl-dimension-upload-drop-pad-x);
--wl-dimension-upload-drop-pad-x: 20px;
--wl-space-0: 0px;
--wl-space-none: var(--wl-space-0);
--wl-space-2: 2px;
--wl-space-2xs: var(--wl-space-2);
--wl-space-4: 4px;
--wl-space-xs: var(--wl-space-4);
--wl-space-8: 8px;
--wl-space-sm: var(--wl-space-8);
--wl-space-12: 12px;
--wl-space-md: var(--wl-space-12);
--wl-space-16: 16px;
--wl-space-lg: var(--wl-space-16);
--wl-space-24: 24px;
--wl-space-xl: var(--wl-space-24);
--wl-space-32: 32px;
--wl-space-2xl: var(--wl-space-32);
--wl-space-48: 48px;
--wl-space-3xl: var(--wl-space-48);
--wl-space-64: 64px;
--wl-space-4xl: var(--wl-space-64);
--wl-font-display-size: 40px;
--wl-type-display-size: var(--wl-font-display-size);
--wl-font-display-line-height: 48px;
--wl-type-display-line-height: var(--wl-font-display-line-height);
--wl-font-display-weight: 700;
--wl-type-display-weight: var(--wl-font-display-weight);
--wl-font-display-family: var(--wl-font-heading);
--wl-type-display-family: var(--wl-font-display-family);
--wl-font-title-size: 28px;
--wl-type-title-size: var(--wl-font-title-size);
--wl-font-title-line-height: 36px;
--wl-type-title-line-height: var(--wl-font-title-line-height);
--wl-font-title-weight: 700;
--wl-type-title-weight: var(--wl-font-title-weight);
--wl-font-title-family: var(--wl-font-heading);
--wl-type-title-family: var(--wl-font-title-family);
--wl-font-heading-size: 20px;
--wl-type-heading-size: var(--wl-font-heading-size);
--wl-font-heading-line-height: 28px;
--wl-type-heading-line-height: var(--wl-font-heading-line-height);
--wl-font-heading-weight: 650;
--wl-type-heading-weight: var(--wl-font-heading-weight);
--wl-font-heading-family: var(--wl-font-heading);
--wl-type-heading-family: var(--wl-font-heading-family);
--wl-font-subheading-size: 16px;
--wl-type-subheading-size: var(--wl-font-subheading-size);
--wl-font-subheading-line-height: 24px;
--wl-type-subheading-line-height: var(--wl-font-subheading-line-height);
--wl-font-subheading-weight: 600;
--wl-type-subheading-weight: var(--wl-font-subheading-weight);
--wl-font-subheading-family: var(--wl-font-heading);
--wl-type-subheading-family: var(--wl-font-subheading-family);
--wl-font-body-size: 14px;
--wl-type-body-size: var(--wl-font-body-size);
--wl-font-body-line-height: 20px;
--wl-type-body-line-height: var(--wl-font-body-line-height);
--wl-font-body-weight: 400;
--wl-type-body-weight: var(--wl-font-body-weight);
--wl-font-body-family: var(--wl-font);
--wl-type-body-family: var(--wl-font-body-family);
--wl-font-small-size: 12px;
--wl-type-small-size: var(--wl-font-small-size);
--wl-font-small-line-height: 18px;
--wl-type-small-line-height: var(--wl-font-small-line-height);
--wl-font-small-weight: 400;
--wl-type-small-weight: var(--wl-font-small-weight);
--wl-font-small-family: var(--wl-font);
--wl-type-small-family: var(--wl-font-small-family);
--wl-font-label-size: 13px;
--wl-type-label-size: var(--wl-font-label-size);
--wl-font-label-line-height: 20px;
--wl-type-label-line-height: var(--wl-font-label-line-height);
--wl-font-label-weight: 500;
--wl-type-label-weight: var(--wl-font-label-weight);
--wl-font-label-family: var(--wl-font);
--wl-type-label-family: var(--wl-font-label-family);
--wl-font-code-size: 12px;
--wl-type-code-size: var(--wl-font-code-size);
--wl-font-code-line-height: 18px;
--wl-type-code-line-height: var(--wl-font-code-line-height);
--wl-font-code-weight: 400;
--wl-type-code-weight: var(--wl-font-code-weight);
--wl-font-code-family: var(--wl-mono);
--wl-type-code-family: var(--wl-font-code-family);
--wl-text-muted: var(--wl-text-2);
--wl-focus-color: var(--wl-accent);
--wl-focus-invalid-color: var(--wl-danger-hover);
--wl-text-danger: var(--wl-err-text);
--wl-action-primary-bg: var(--wl-palette-action-primary-bg);
--wl-action-primary-hover: var(--wl-palette-action-primary-hover);
--wl-action-primary-text: var(--wl-palette-action-primary-text);
--wl-action-danger-bg: var(--wl-palette-danger);
--wl-action-danger-hover: var(--wl-palette-danger-hover);
--wl-action-danger-text: var(--wl-on-accent);
--wl-size-page-max: 1240px;
--wl-layout-page-max: var(--wl-size-page-max);
--wl-layout-page-gutter: var(--wl-space-xl);
--wl-layout-grid-gap: var(--wl-space-lg);
--wl-elevation-surface: var(--wl-shadow-card);
--wl-elevation-floating: var(--wl-shadow-pop);
--wl-motion-fast: var(--wl-dur-2);
--wl-motion-normal: var(--wl-dur-4);
--wl-motion-slow: var(--wl-dur-5);
--wl-motion-ease: var(--wl-ease);
--wl-size-reading-max: 72ch;
--wl-layout-reading-max: var(--wl-size-reading-max);
--wl-size-grid-min: 240px;
--wl-layout-grid-min: var(--wl-size-grid-min);
--wl-z-base: 0;
--wl-layer-base: var(--wl-z-base);
--wl-z-sticky: 50;
--wl-layer-sticky: var(--wl-z-sticky);
--wl-palette-action-primary-active: #326179;
--wl-palette-accent-warm: #948775;
--wl-palette-accent-warm-soft: #efebe3;
--wl-action-primary-active: var(--wl-palette-action-primary-active);
--wl-accent-warm: var(--wl-palette-accent-warm);
--wl-accent-warm-soft: var(--wl-palette-accent-warm-soft);
--wl-dimension-btn-radius: 4px;
--wl-dimension-btn-radius-sm: 3px;
--wl-dimension-btn-radius-lg: 5px;
--wl-corner-button: var(--wl-dimension-btn-radius);
--wl-corner-button-sm: var(--wl-dimension-btn-radius-sm);
--wl-corner-button-lg: var(--wl-dimension-btn-radius-lg);
--wl-btn-radius-lg: var(--wl-corner-button-lg);
}
@media (prefers-reduced-motion: reduce) {
[data-wl-theme="gavia"] {
--wl-dur-1: 0.01ms;
--wl-dur-2: 0.01ms;
--wl-dur-3: 0.01ms;
--wl-dur-4: 0.01ms;
--wl-dur-5: 0.01ms;
}
}
}
@layer wl.reset, wl.tokens, wl.components;
@layer wl.components {
.wl-stack { display: flex; flex-direction: column; gap: var(--wl-space-lg); min-width: 0; }
.wl-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wl-space-lg); min-width: 0; }
.wl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--wl-layout-grid-min)), 1fr)); gap: var(--wl-layout-grid-gap); min-width: 0; }
.wl-container { box-sizing: border-box; min-width: 0; width: 100%; max-width: var(--wl-layout-page-max); margin-inline: auto; padding-inline: var(--wl-layout-page-gutter); }
.wl-container--narrow { max-width: var(--wl-layout-reading-max); }
.wl-container--fluid { max-width: none; }
.wl-container--full { max-width: none; padding-inline: 0; }
.wl-rule { width: 100%; margin: 0; border: 0; border-block-start: 1px solid var(--wl-border); }
.wl-scroll-area { min-width: 0; max-width: 100%; overflow: auto; }
.wl-isolate { isolation: isolate; }
.wl-surface { background: var(--wl-bg); color: var(--wl-text); border: 1px solid var(--wl-border); border-radius: var(--wl-corner-surface); padding: var(--wl-space-xl); }
.wl-text-muted { color: var(--wl-text-muted); }
.wl-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
:where(.wl-stack, .wl-inline, .wl-grid)[data-space="none"] { gap: var(--wl-space-none); }
:where(.wl-stack, .wl-inline, .wl-grid)[data-space="2xs"] { gap: var(--wl-space-2xs); }
:where(.wl-stack, .wl-inline, .wl-grid)[data-space="xs"] { gap: var(--wl-space-xs); }
:where(.wl-stack, .wl-inline, .wl-grid)[data-space="sm"] { gap: var(--wl-space-sm); }
:where(.wl-stack, .wl-inline, .wl-grid)[data-space="md"] { gap: var(--wl-space-md); }
:where(.wl-stack, .wl-inline, .wl-grid)[data-space="lg"] { gap: var(--wl-space-lg); }
:where(.wl-stack, .wl-inline, .wl-grid)[data-space="xl"] { gap: var(--wl-space-xl); }
:where(.wl-stack, .wl-inline, .wl-grid)[data-space="2xl"] { gap: var(--wl-space-2xl); }
:where(.wl-stack, .wl-inline, .wl-grid)[data-space="3xl"] { gap: var(--wl-space-3xl); }
:where(.wl-stack, .wl-inline, .wl-grid)[data-space="4xl"] { gap: var(--wl-space-4xl); }
.wl-text-display { font-family: var(--wl-type-display-family); font-size: var(--wl-type-display-size); line-height: var(--wl-type-display-line-height); font-weight: var(--wl-type-display-weight); }
.wl-text-title { font-family: var(--wl-type-title-family); font-size: var(--wl-type-title-size); line-height: var(--wl-type-title-line-height); font-weight: var(--wl-type-title-weight); }
.wl-text-heading { font-family: var(--wl-type-heading-family); font-size: var(--wl-type-heading-size); line-height: var(--wl-type-heading-line-height); font-weight: var(--wl-type-heading-weight); }
.wl-text-subheading { font-family: var(--wl-type-subheading-family); font-size: var(--wl-type-subheading-size); line-height: var(--wl-type-subheading-line-height); font-weight: var(--wl-type-subheading-weight); }
.wl-text-body { font-family: var(--wl-type-body-family); font-size: var(--wl-type-body-size); line-height: var(--wl-type-body-line-height); font-weight: var(--wl-type-body-weight); }
.wl-text-small { font-family: var(--wl-type-small-family); font-size: var(--wl-type-small-size); line-height: var(--wl-type-small-line-height); font-weight: var(--wl-type-small-weight); }
.wl-text-label { font-family: var(--wl-type-label-family); font-size: var(--wl-type-label-size); line-height: var(--wl-type-label-line-height); font-weight: var(--wl-type-label-weight); }
.wl-text-code { font-family: var(--wl-type-code-family); font-size: var(--wl-type-code-size); line-height: var(--wl-type-code-line-height); font-weight: var(--wl-type-code-weight); }
}