/* Generated from the application token source. */
:root {

  /* @group Color */
  --primary: #f3f0e8;
  --secondary: #c57979;
  --tertiary: #30352f;
  --page: #f6f6f5;
  --surface: #fcfcfa;
  --ink: var(--tertiary);
  --muted: #70736b;
  --line: #e4e4dd;
  --accent: #737c63;
  --secondary-hover: color-mix(in srgb, var(--secondary) 90%, var(--primary));
  --on-secondary: var(--page);
  --option-selected: #ededed;
  --selection-background: color-mix(in srgb, var(--secondary) 10%, var(--page));
  --focus-surface: color-mix(in srgb, var(--secondary) 8%, var(--page));

  /* @group UI roles */
  --text-primary: var(--ink);
  --text-secondary: var(--muted);
  --window-surface: var(--primary);
  --window-border: var(--line);
  --control-surface: var(--page);
  --action-fill: var(--secondary);
  --action-text: var(--on-secondary);
  --action-hover: var(--secondary-hover);
  --stroke-width: 1px;
  --control-padding-block: 10px;
  --control-padding-inline: 18px;
  --control-gap: 9px;

  /* @group Typography */
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Helvetica Neue", Arial, Helvetica, sans-serif;
  --text-label: 11px;
  --text-control: var(--text-body);
  --text-ui: var(--text-body);
  --text-body: 14px;
  --text-input: 16px;
  --text-lead: 17px;
  --text-display: clamp(30px, 3.7vw, 42px);
  --leading-body: 1.5;
  --leading-display: 1.1;
  --tracking-display: -1px;
  --weight-normal: 400;
  --weight-medium: 500;

  /* @group Spacing */
  --space-xs: 6px;
  --space-sm: 12px;
  --space-md: 24px;

  /* @group Shape */
  --radius: 6px;
  --radius-option: 10px;
  --radius-card: 16px;
  --radius-popover: 18px;
  --window-radius: 24px;
  --window-radius-mobile: var(--radius-popover);
  --control-height: 44px;
  --checkbox-size: 18px;

  /* @group Layout */
  --sidebar-width: 274px;
  --studio-gutter: 24px;

  /* @group Elevation */
  --segmented-shadow: 0 2px 8px color-mix(in srgb, var(--ink) 1.6%, transparent);

  /* @group Motion */
  --motion-control: 180ms;
}

@media (max-width: 1000px) {
  :root {
    --sidebar-width: 250px;
    --studio-gutter: 16px;
  }
}

@media (max-width: 700px) {
  :root {
    --text-display: clamp(27px, 7.7vw, 34px);
    --leading-display: 1.13;
  }
}