body {
  color-scheme: light;
}

:root {
  /* ====================
    Colors
    ==================== */

  /* Content */
  --color-surface: #f3f1ec;
  --color-surface-2: #e5e2dc;
  --color-background: #efebe6;
  --color-body-text: var(--color-base);
  --color-muted-text: var(--color-base-400);

  /* Other */
  --color-placeholder: rgb(64 61 43 / 40%);
  --focus-visible-outline-color: #db822c;
  --badge-default-text-color: rgb(255 255 255 / 88%);

  /* Feedback */
  --color-danger: #c92929;
  --color-on-danger: color-mix(in srgb, var(--color-danger) 10%, white);
  --color-feedback-default-text-color: #4b452c;
  --color-feedback-default-background: var(--color-surface-2);
  --color-feedback-info-text-color: #174ea6;
  --color-feedback-info-background: #c9def8;
  --color-feedback-success-text-color: #0d652d;
  --color-feedback-success-background: #d5ecda;
  --color-feedback-warning-text-color: #b34100;
  --color-feedback-warning-background: #fdeac4;
  --color-feedback-error-background: #f6cbcb;
  --color-feedback-ai-text-color: #342d51;
  --color-feedback-ai-background: #d2c9f8;
  --color-feedback-alt-text-color: var(--color-base-200);
  --color-feedback-alt-background: var(--color-base-600);

  /* Links */
  --link-color: currentcolor;
  --link-color-hover: color-mix(in srgb, currentcolor 70%, transparent);

  /* Borders */
  --color-border: #ccc3b3;

  /* List item selected */
  --color-selected-highlight: #eff2f6;

  /* ====================
    Forms
    ==================== */
  --form-control-background: #fdfdfc;
  --form-control-border-color: rgb(from var(--color-border) r g b / 90%);

  /* ====================
    Interaction
    ==================== */
  --color-interaction-400: rgb(from var(--color-muted-text) r g b / 10%);
  --color-interaction-500: rgb(from var(--color-muted-text) r g b / 17%);
  --color-interaction-600: rgb(from var(--color-muted-text) r g b / 22%);
  --interaction-text-color-hover-focus: color-mix(
    in srgb,
    currentcolor 70%,
    black
  );
  --interaction-background-hover-focus: var(--color-interaction-400);
  --interaction-background-active: var(--color-interaction-500);

  /* ====================
    Popovers
    ==================== */
  --popover-background: #f8f6f2;
}