@import url('../layers.css');
@import url('./ymmd-primitives.css');
@import url('./ymmd-light.tokens.css');

/* Web Awesome mappings for the exported Yoummday Figma primitives and light semantic tokens. */
@font-face {
  font-family: 'Roboto Flex';
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 100%;
  font-display: swap;
  src: url('./roboto-flex-regular.woff2') format('woff2');
}

@layer wa-theme {
  :where(:root),
  :host,
  .wa-theme-ymmd-light,
  .wa-theme-ymmd-light.wa-light,
  .wa-theme-ymmd-light .wa-light,
  .wa-light .wa-theme-ymmd-light {
    /* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */
    color-scheme: light;
    color: var(--wa-color-text-normal);

    --wa-color-gray-95: var(--ymmd-color-neutral-50);
    --wa-color-gray-90: var(--ymmd-color-neutral-100);
    --wa-color-gray-80: var(--ymmd-color-neutral-200);
    --wa-color-gray-70: var(--ymmd-color-neutral-300);
    --wa-color-gray-60: var(--ymmd-color-neutral-400);
    --wa-color-gray-50: var(--ymmd-color-neutral-500);
    --wa-color-gray-40: var(--ymmd-color-neutral-600);
    --wa-color-gray-30: var(--ymmd-color-neutral-700);
    --wa-color-gray-20: var(--ymmd-color-neutral-800);
    --wa-color-gray-10: var(--ymmd-color-neutral-900);
    --wa-color-gray-05: var(--ymmd-color-neutral-950);
    --wa-color-gray: var(--wa-color-gray-40);
    --wa-color-gray-key: 40;

    --wa-color-red-95: var(--ymmd-color-red-50);
    --wa-color-red-90: var(--ymmd-color-red-100);
    --wa-color-red-80: var(--ymmd-color-red-200);
    --wa-color-red-70: var(--ymmd-color-red-300);
    --wa-color-red-60: var(--ymmd-color-red-400);
    --wa-color-red-50: var(--ymmd-color-red-500);
    --wa-color-red-40: var(--ymmd-color-red-600);
    --wa-color-red-30: var(--ymmd-color-red-700);
    --wa-color-red-20: var(--ymmd-color-red-800);
    --wa-color-red-10: var(--ymmd-color-red-900);
    --wa-color-red-05: var(--ymmd-color-red-950);
    --wa-color-red: var(--wa-color-red-50);
    --wa-color-red-key: 50;

    --wa-color-yellow-95: var(--ymmd-color-yellow-50);
    --wa-color-yellow-90: var(--ymmd-color-yellow-100);
    --wa-color-yellow-80: var(--ymmd-color-yellow-200);
    --wa-color-yellow-70: var(--ymmd-color-yellow-300);
    --wa-color-yellow-60: var(--ymmd-color-yellow-400);
    --wa-color-yellow-50: var(--ymmd-color-yellow-500);
    --wa-color-yellow-40: var(--ymmd-color-yellow-600);
    --wa-color-yellow-30: var(--ymmd-color-yellow-700);
    --wa-color-yellow-20: var(--ymmd-color-yellow-800);
    --wa-color-yellow-10: var(--ymmd-color-yellow-900);
    --wa-color-yellow-05: var(--ymmd-color-yellow-950);
    --wa-color-yellow: var(--wa-color-yellow-50);
    --wa-color-yellow-key: 50;

    --wa-color-green-95: var(--ymmd-color-green-50);
    --wa-color-green-90: var(--ymmd-color-green-100);
    --wa-color-green-80: var(--ymmd-color-green-200);
    --wa-color-green-70: var(--ymmd-color-green-300);
    --wa-color-green-60: var(--ymmd-color-green-400);
    --wa-color-green-50: var(--ymmd-color-green-500);
    --wa-color-green-40: var(--ymmd-color-green-600);
    --wa-color-green-30: var(--ymmd-color-green-700);
    --wa-color-green-20: var(--ymmd-color-green-800);
    --wa-color-green-10: var(--ymmd-color-green-900);
    --wa-color-green-05: var(--ymmd-color-green-950);
    --wa-color-green: var(--wa-color-green-50);
    --wa-color-green-key: 50;

    --wa-color-orange-95: var(--ymmd-color-orange-50);
    --wa-color-orange-90: var(--ymmd-color-orange-100);
    --wa-color-orange-80: var(--ymmd-color-orange-200);
    --wa-color-orange-70: var(--ymmd-color-orange-300);
    --wa-color-orange-60: var(--ymmd-color-orange-400);
    --wa-color-orange-50: var(--ymmd-color-orange-500);
    --wa-color-orange-40: var(--ymmd-color-orange-600);
    --wa-color-orange-30: var(--ymmd-color-orange-700);
    --wa-color-orange-20: var(--ymmd-color-orange-800);
    --wa-color-orange-10: var(--ymmd-color-orange-900);
    --wa-color-orange-05: var(--ymmd-color-orange-950);
    --wa-color-orange: var(--wa-color-orange-50);
    --wa-color-orange-key: 50;

    /* Retained legacy WA blue ramp: Yoummday badges use it and Figma exports no complete replacement ramp. */
    --wa-color-blue-95: hsl(201deg 100% 95%);
    --wa-color-blue-90: hsl(202deg 100% 93%);
    --wa-color-blue-80: hsl(202deg 100% 90%);
    --wa-color-blue-70: hsl(202deg 100% 86%);
    --wa-color-blue-60: hsl(202deg 100% 79%);
    --wa-color-blue-50: hsl(202deg 94% 67%);
    --wa-color-blue-40: hsl(205deg 97% 57%);
    --wa-color-blue-30: hsl(207deg 81% 52%);
    --wa-color-blue-20: hsl(209deg 80% 46%);
    --wa-color-blue-10: hsl(211deg 83% 41%);
    --wa-color-blue-05: hsl(214deg 89% 28%);
    --wa-color-blue: var(--wa-color-blue-40);
    --wa-color-blue-key: 40;

    --wa-color-lotus-95: var(--ymmd-color-purple-50);
    --wa-color-lotus-90: var(--ymmd-color-purple-100);
    --wa-color-lotus-80: var(--ymmd-color-purple-200);
    --wa-color-lotus-70: var(--ymmd-color-purple-300);
    --wa-color-lotus-60: var(--ymmd-color-purple-400);
    --wa-color-lotus-50: var(--ymmd-color-purple-500);
    --wa-color-lotus-40: var(--ymmd-color-purple-600);
    --wa-color-lotus-30: var(--ymmd-color-purple-700);
    --wa-color-lotus-20: var(--ymmd-color-purple-800);
    --wa-color-lotus-10: var(--ymmd-color-purple-900);
    --wa-color-lotus-05: var(--ymmd-color-purple-950);

    --wa-color-brand-95: var(--wa-color-lotus-95);
    --wa-color-brand-90: var(--wa-color-lotus-90);
    --wa-color-brand-80: var(--wa-color-lotus-80);
    --wa-color-brand-70: var(--wa-color-lotus-70);
    --wa-color-brand-60: var(--wa-color-lotus-60);
    --wa-color-brand-50: var(--wa-color-lotus-50);
    --wa-color-brand-40: var(--wa-color-lotus-40);
    --wa-color-brand-30: var(--wa-color-lotus-30);
    --wa-color-brand-20: var(--wa-color-lotus-20);
    --wa-color-brand-10: var(--wa-color-lotus-10);
    --wa-color-brand-05: var(--wa-color-lotus-05);
    --wa-color-brand: var(--wa-color-brand-40);
    --wa-color-brand-on: white;

    --wa-color-success-95: var(--wa-color-green-95);
    --wa-color-success-90: var(--wa-color-green-90);
    --wa-color-success-80: var(--wa-color-green-80);
    --wa-color-success-70: var(--wa-color-green-70);
    --wa-color-success-60: var(--wa-color-green-60);
    --wa-color-success-50: var(--wa-color-green-50);
    --wa-color-success-40: var(--wa-color-green-40);
    --wa-color-success-30: var(--wa-color-green-30);
    --wa-color-success-20: var(--wa-color-green-20);
    --wa-color-success-10: var(--wa-color-green-10);
    --wa-color-success-05: var(--wa-color-green-05);
    --wa-color-success: var(--wa-color-success-50);
    --wa-color-success-on: white;

    --wa-color-warning-95: var(--wa-color-yellow-95);
    --wa-color-warning-90: var(--wa-color-yellow-90);
    --wa-color-warning-80: var(--wa-color-yellow-80);
    --wa-color-warning-70: var(--wa-color-yellow-70);
    --wa-color-warning-60: var(--wa-color-yellow-60);
    --wa-color-warning-50: var(--wa-color-yellow-50);
    --wa-color-warning-40: var(--wa-color-yellow-40);
    --wa-color-warning-30: var(--wa-color-yellow-30);
    --wa-color-warning-20: var(--wa-color-yellow-20);
    --wa-color-warning-10: var(--wa-color-yellow-10);
    --wa-color-warning-05: var(--wa-color-yellow-05);
    --wa-color-warning: var(--wa-color-warning-50);
    --wa-color-warning-on: var(--wa-color-warning-10);

    --wa-color-danger-95: var(--wa-color-red-95);
    --wa-color-danger-90: var(--wa-color-red-90);
    --wa-color-danger-80: var(--wa-color-red-80);
    --wa-color-danger-70: var(--wa-color-red-70);
    --wa-color-danger-60: var(--wa-color-red-60);
    --wa-color-danger-50: var(--wa-color-red-50);
    --wa-color-danger-40: var(--wa-color-red-40);
    --wa-color-danger-30: var(--wa-color-red-30);
    --wa-color-danger-20: var(--wa-color-red-20);
    --wa-color-danger-10: var(--wa-color-red-10);
    --wa-color-danger-05: var(--wa-color-red-05);
    --wa-color-danger: var(--wa-color-danger-50);
    --wa-color-danger-on: white;

    --wa-color-neutral-95: var(--wa-color-gray-95);
    --wa-color-neutral-90: var(--wa-color-gray-90);
    --wa-color-neutral-80: var(--wa-color-gray-80);
    --wa-color-neutral-70: var(--wa-color-gray-70);
    --wa-color-neutral-60: var(--wa-color-gray-60);
    --wa-color-neutral-50: var(--wa-color-gray-50);
    --wa-color-neutral-40: var(--wa-color-gray-40);
    --wa-color-neutral-30: var(--wa-color-gray-30);
    --wa-color-neutral-20: var(--wa-color-gray-20);
    --wa-color-neutral-10: var(--wa-color-gray-10);
    --wa-color-neutral-05: var(--wa-color-gray-05);
    --wa-color-neutral: var(--wa-color-neutral-40);
    --wa-color-neutral-on: white;

    --wa-color-surface-raised: var(--ymmd-color-surface-raised);
    --wa-color-surface-default: var(--ymmd-color-surface-container-low);
    --wa-color-surface-lowered: var(--ymmd-color-surface-container);
    --wa-color-surface-border: var(--ymmd-color-border-default);

    --wa-color-text-normal: var(--ymmd-color-text-secondary);
    --wa-color-text-quiet: var(--ymmd-color-text-tertiary);
    --wa-color-text-link: var(--ymmd-color-link-default);

    --wa-color-overlay-modal: var(--ymmd-color-surface-backdrop);
    --wa-color-overlay-inline: var(--ymmd-color-surface-overlay);
    --wa-color-shadow: var(--ymmd-color-shadow-level-1);
    --wa-color-focus: var(--ymmd-color-states-base-focus-ring);

    --wa-color-mix-hover: oklch(from currentColor calc(l + 0.1) c h) 10%;
    --wa-color-mix-active: oklch(from currentColor calc(l - 0.3) c h) 10%;

    --wa-color-brand-fill-quiet: var(--ymmd-color-states-base-bg-hover);
    --wa-color-brand-fill-normal: var(--ymmd-color-states-base-bg-selected);
    --wa-color-brand-fill-loud: var(--ymmd-color-action-primary-default);
    --wa-color-brand-border-quiet: var(--ymmd-color-selection-accent-border-default);
    --wa-color-brand-border-normal: var(--ymmd-color-selection-accent-border-hover);
    --wa-color-brand-border-loud: var(--ymmd-color-action-outline-default-border);
    --wa-color-brand-on-quiet: var(--ymmd-color-action-ghost-text-default);
    --wa-color-brand-on-normal: var(--ymmd-color-text-primary);
    --wa-color-brand-on-loud: var(--ymmd-color-text-inverse);

    --wa-color-success-fill-quiet: var(--ymmd-color-status-success-light);
    --wa-color-success-fill-normal: var(--ymmd-color-green-100);
    --wa-color-success-fill-loud: var(--ymmd-color-status-success-dark);
    --wa-color-success-border-quiet: var(--ymmd-color-green-200);
    --wa-color-success-border-normal: var(--ymmd-color-green-300);
    --wa-color-success-border-loud: var(--ymmd-color-green-600);
    --wa-color-success-on-quiet: var(--ymmd-color-status-success-text-dark);
    --wa-color-success-on-normal: var(--ymmd-color-status-success-text-dark);
    --wa-color-success-on-loud: var(--ymmd-color-text-inverse);

    --wa-color-warning-fill-quiet: var(--ymmd-color-status-warning-light);
    --wa-color-warning-fill-normal: var(--ymmd-color-yellow-100);
    --wa-color-warning-fill-loud: var(--ymmd-color-status-warning-dark);
    --wa-color-warning-border-quiet: var(--ymmd-color-yellow-200);
    --wa-color-warning-border-normal: var(--ymmd-color-yellow-300);
    --wa-color-warning-border-loud: var(--ymmd-color-yellow-600);
    --wa-color-warning-on-quiet: var(--ymmd-color-status-warning-text-dark);
    --wa-color-warning-on-normal: var(--ymmd-color-yellow-700);
    --wa-color-warning-on-loud: var(--ymmd-color-text-secondary);

    --wa-color-danger-fill-quiet: var(--ymmd-color-status-danger-light);
    --wa-color-danger-fill-normal: var(--ymmd-color-red-100);
    --wa-color-danger-fill-loud: var(--ymmd-color-action-danger-default);
    --wa-color-danger-border-quiet: var(--ymmd-color-red-200);
    --wa-color-danger-border-normal: var(--ymmd-color-red-300);
    --wa-color-danger-border-loud: var(--ymmd-color-border-danger);
    --wa-color-danger-on-quiet: var(--ymmd-color-text-danger);
    --wa-color-danger-on-normal: var(--ymmd-color-red-700);
    --wa-color-danger-on-loud: var(--ymmd-color-text-inverse);

    --wa-color-neutral-fill-quiet: var(--ymmd-color-states-neutral-bg-hover);
    --wa-color-neutral-fill-normal: var(--ymmd-color-action-secondary-default);
    --wa-color-neutral-fill-loud: var(--ymmd-color-status-neutral-dark);
    --wa-color-neutral-border-quiet: var(--ymmd-color-border-subtle);
    --wa-color-neutral-border-normal: var(--ymmd-color-border-default);
    --wa-color-neutral-border-loud: var(--ymmd-color-border-strong);
    --wa-color-neutral-on-quiet: var(--ymmd-color-text-tertiary);
    --wa-color-neutral-on-normal: var(--ymmd-color-text-secondary);
    --wa-color-neutral-on-loud: var(--ymmd-color-text-inverse);
    /* #endregion */
  }

  :where(:root),
  :host,
  .wa-theme-ymmd-light,
  .wa-theme-ymmd-light.wa-light,
  .wa-theme-ymmd-light .wa-light {
    font-family: var(--wa-font-family-body);

    /* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-font-family-body:
      'Roboto Flex', helvetica, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
      'Noto Color Emoji';
    --wa-font-family-heading: var(--wa-font-family-body);
    --wa-font-family-code: var(--ymmd-font-family-mono), ui-monospace, monospace;
    --wa-font-family-longform: var(--ymmd-font-family-serif), ui-serif, serif;

    /* Font sizes use a ratio of 1.125 to scale sizes proportionally.
     * For larger font sizes, each size is twice 1.125x larger to maximize impact.
     * Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */
    --wa-font-size-scale: 1;
    --wa-font-size-3xs: round(calc(var(--wa-font-size-2xs) / 1.125), 1px);
    --wa-font-size-2xs: calc(0.5rem * var(--wa-font-size-scale)); /* 8px */
    --wa-font-size-xs: calc(var(--ymmd-font-size-12) * var(--wa-font-size-scale));
    --wa-font-size-s: calc(var(--ymmd-font-size-14) * var(--wa-font-size-scale));
    --wa-font-size-m: calc(var(--ymmd-font-size-16) * var(--wa-font-size-scale));
    --wa-font-size-l: calc(var(--ymmd-font-size-20) * var(--wa-font-size-scale));
    --wa-font-size-xl: calc(var(--ymmd-font-size-24) * var(--wa-font-size-scale));
    --wa-font-size-2xl: calc(var(--ymmd-font-size-36) * var(--wa-font-size-scale));
    --wa-font-size-3xl: calc(var(--ymmd-font-size-52) * var(--wa-font-size-scale));
    --wa-font-size-4xl: calc(var(--ymmd-font-size-72) * var(--wa-font-size-scale));
    --wa-font-size-5xl: round(calc(var(--wa-font-size-4xl) * 1.125 * 1.125), 1px);

    --wa-font-size-smaller: round(calc(1em / 1.125), 1px);
    --wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);

    --wa-font-weight-light: var(--ymmd-font-weight-light);
    --wa-font-weight-normal: var(--ymmd-font-weight-regular);
    --wa-font-weight-semibold: var(--ymmd-font-weight-medium);
    --wa-font-weight-bold: var(--ymmd-font-weight-semibold);

    --wa-font-weight-body: var(--wa-font-weight-normal);
    --wa-font-weight-heading: var(--wa-font-weight-bold);
    --wa-font-weight-code: var(--wa-font-weight-normal);
    --wa-font-weight-longform: var(--wa-font-weight-normal);
    --wa-font-weight-action: var(--wa-font-weight-semibold);

    --wa-line-height-condensed: 1.2;
    --wa-line-height-normal: 1.5;
    /* Unused in this repository; Figma supplies exact line heights on the --ymmd-typography-* tokens instead. */
    /* --wa-line-height-expanded: 1.8; */

    --wa-link-decoration-default: underline;
    --wa-link-decoration-hover: underline;
    /* #endregion */

    /* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-space-scale: 1;
    --wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
    --wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
    --wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
    --wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
    --wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
    --wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
    --wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
    --wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 40px */
    --wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
    --wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 64px */
    --wa-space-5xl: calc(var(--wa-space-scale) * 5rem); /* 80px */

    /* Figma-only steps: Web Awesome's upstream scale has no 20px or 96px roles. */
    --ymmd-space-sm: calc(var(--wa-space-scale) * 1.25rem); /* 20px */
    --ymmd-space-6xl: calc(var(--wa-space-scale) * 6rem); /* 96px */

    --wa-content-spacing: var(--wa-space-l);
    /* #endregion */

    /* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-border-style: solid;

    --wa-border-width-scale: 1;
    --wa-border-width-s: calc(var(--wa-border-width-scale) * var(--ymmd-border-width-1));
    --wa-border-width-m: calc(var(--wa-border-width-scale) * var(--ymmd-border-width-2));
    --wa-border-width-l: calc(var(--wa-border-width-scale) * var(--ymmd-border-width-3));
    /* #endregion */

    /* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-border-radius-scale: 1;
    --wa-border-radius-s: calc(var(--wa-border-radius-scale) * var(--ymmd-border-radius-4));
    --wa-border-radius-m: calc(var(--wa-border-radius-scale) * var(--ymmd-border-radius-8));
    --wa-border-radius-l: calc(var(--wa-border-radius-scale) * var(--ymmd-border-radius-12));

    --wa-border-radius-pill: var(--ymmd-border-radius-full);
    --wa-border-radius-circle: 50%;
    --wa-border-radius-square: 0px;
    /* #endregion */

    /* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-focus-ring-style: solid;
    --wa-focus-ring-width: 0.1875rem; /* 3px */
    --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
    --wa-focus-ring-offset: 0.0625rem; /* 1px */
    /* #endregion */

    /* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-shadow-offset-x-scale: 0;
    --wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem);
    --wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem);
    --wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);

    --wa-shadow-offset-y-scale: 0.0625;
    --wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem);
    --wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem);
    --wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);

    --wa-shadow-blur-scale: 1;
    --wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem);
    --wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem);
    --wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem);

    --wa-shadow-spread-scale: 0;
    --wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem);
    --wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem);
    --wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem);

    --wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
      var(--wa-shadow-spread-s) var(--ymmd-color-shadow-level-1);
    --wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
      var(--wa-shadow-spread-m) var(--ymmd-color-shadow-level-2);
    --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
      var(--wa-shadow-spread-l) var(--ymmd-color-shadow-level-3);
    /* #endregion */

    /* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-transition-easing: ease;
    --wa-transition-slow: 250ms;
    --wa-transition-normal: 150ms;
    --wa-transition-fast: 50ms;
    /* #endregion */

    /* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */
    /* Form Controls */
    --wa-form-control-background-color: var(--wa-color-surface-default);

    --wa-form-control-border-color: var(--ymmd-color-control-border-unchecked);
    --wa-form-control-border-style: var(--wa-border-style);
    --wa-form-control-border-width: var(--wa-border-width-s);
    --wa-form-control-border-radius: var(--wa-border-radius-m);

    --wa-form-control-activated-color: var(--ymmd-color-control-bg-checked);

    --wa-form-control-label-color: var(--wa-color-text-normal);
    --wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
    --wa-form-control-label-line-height: var(--wa-line-height-condensed);

    --wa-form-control-value-color: var(--ymmd-color-text-secondary);
    --wa-form-control-value-font-weight: var(--wa-font-weight-body);
    --wa-form-control-value-line-height: var(--wa-line-height-condensed);

    --wa-form-control-hint-color: var(--wa-color-text-quiet);
    --wa-form-control-hint-font-weight: var(--wa-font-weight-body);
    --wa-form-control-hint-line-height: var(--wa-line-height-normal);

    --wa-form-control-placeholder-color: var(--ymmd-color-text-placeholder);

    --wa-form-control-required-content: '*';
    --wa-form-control-required-content-color: inherit;
    --wa-form-control-required-content-offset: 0.1em;

    --wa-form-control-padding-block: 0.75em;
    --wa-form-control-padding-inline: 1em;
    --wa-form-control-height: round(
      calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)),
      1px
    );
    --wa-form-control-toggle-size: round(1.25em, 1px);

    /* Buttons */
    --wa-button-transform-hover: none;
    --wa-button-transform-active: none;

    /* Panels */
    --wa-panel-border-style: var(--wa-border-style);
    --wa-panel-border-width: var(--wa-border-width-s);
    --wa-panel-border-radius: var(--wa-border-radius-m);

    /* Tooltips */
    --wa-tooltip-arrow-size: 0.375rem;

    --wa-tooltip-background-color: var(--wa-color-text-normal);

    --wa-tooltip-border-color: var(--wa-tooltip-background-color);
    --wa-tooltip-border-style: var(--wa-border-style);
    --wa-tooltip-border-width: var(--wa-border-width-s);
    --wa-tooltip-border-radius: var(--wa-border-radius-s);

    --wa-tooltip-content-color: var(--wa-color-surface-default);
    --wa-tooltip-font-size: var(--wa-font-size-s);
    --wa-tooltip-line-height: var(--wa-line-height-normal);
    /* #endregion */
  }
}