:root {
          --jv-font-family: "Roboto", Inter, system-ui, sans-serif;
          --jv-color-primary: #6750A4;
          --jv-color-on-primary: #ffffff;
          --jv-color-secondary: #625B71;
          --jv-color-tertiary: #7D5260;
          --jv-color-error: #B3261E;

          --jv-color-surface: #ffffff;
          --jv-color-on-surface: #16181d;
          --jv-color-on-surface-muted: #64748b;
          --jv-color-outline: #d7dde7;
          --jv-color-secondary-container: #e2e8f0;
          --jv-color-on-secondary-container: #0f172a;
          --jv-shape-radius: 8px;
          --jv-density-padding: 16px;
          --jv-type-display-large-size: 57px;
          --jv-type-display-large-line-height: 64px;
          --jv-type-headline-large-size: 32px;
          --jv-type-headline-large-line-height: 40px;
          --jv-type-title-medium-size: 16px;
          --jv-type-title-medium-line-height: 24px;
          --jv-type-body-medium-size: 14px;
          --jv-type-body-medium-line-height: 20px;
          --jv-type-label-large-size: 14px;
          --jv-type-label-large-line-height: 20px;
        }

        [data-theme="dark"], .theme-dark {
          --jv-color-surface: #111827;
          --jv-color-on-surface: #f8fafc;
          --jv-color-on-surface-muted: #cbd5e1;
          --jv-color-outline: #334155;
          --jv-color-secondary-container: #1e293b;
          --jv-color-on-secondary-container: #e2e8f0;
        }

        html {
          color-scheme: light;
          font-family: var(--jv-font-family);
        }