:root {
  --raft-neutral-0: #ffffff;
  --raft-neutral-50: #f2f6f8;
  --raft-neutral-100: #eaeff2;
  --raft-neutral-200: #e0e6e9;
  --raft-neutral-300: #ced6da;
  --raft-neutral-400: #a1abb0;
  --raft-neutral-500: #758389;
  --raft-neutral-600: #59676e;
  --raft-neutral-950: #0c1d24;

  --raft-chrome-50: #eef1f2;
  --raft-chrome-300: #9fb0b6;
  --raft-chrome-400: #748389;
  --raft-chrome-750: #1f3b46;
  --raft-chrome-800: #16323d;
  --raft-chrome-850: #16262e;
  --raft-chrome-900: #0f2630;
  --raft-chrome-950: #0a1a21;

  --raft-amber-50: #fff5e1;
  --raft-amber-400: #f8b133;
  --raft-amber-500: #e89a1f;
  --raft-amber-600: #846c32;
  --raft-amber-800: #7a5200;
  --raft-amber-950: #343c30;

  --raft-red-50: #fff1f1;
  --raft-red-200: #fdc8ca;
  --raft-red-300: #ff8199;
  --raft-red-600: #c2304a;
  --raft-red-700: #6f4a5a;
  --raft-red-950: #31333f;

  --raft-green-50: #eef7f1;
  --raft-green-200: #bfe3cd;
  --raft-green-300: #8fe3a0;
  --raft-green-600: #287c42;
  --raft-green-700: #42725d;
  --raft-green-900: #14532d;
  --raft-green-950: #1e3d3d;

  --raft-violet-300: #c9a9ff;
  --raft-violet-700: #5e3ba3;

  --raft-font: "Mont", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --raft-font-brand: "Mont", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --raft-font-ui: "Inter", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --raft-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --raft-font-size-xs: 0.75rem;
  --raft-font-size-sm: 0.8125rem;
  --raft-font-size-md: 0.875rem;
  --raft-font-size-base: 1rem;
  --raft-font-size-lg: 1.125rem;
  --raft-font-size-xl: 1.5rem;
  --raft-line-height-snug: 1.2;
  --raft-line-height-heading: 1.3;
  --raft-line-height-ui: 1.4;
  --raft-line-height-body: 1.5;
  --raft-font-weight-medium: 500;
  --raft-font-weight-semibold: 600;
  --raft-font-weight-bold: 700;
  --raft-tracking-tight: -0.02em;
  --raft-tracking-caps: 0.05em;

  --raft-space-1: 4px;
  --raft-space-2: 8px;
  --raft-space-3: 12px;
  --raft-space-4: 16px;
  --raft-space-5: 24px;
  --raft-space-6: 32px;
  --raft-space-7: 40px;
  --raft-space-8: 48px;
  --raft-space-9: 64px;
  --raft-gap-icon: 6px;
  --raft-page-max: 1200px;
  --raft-measure: 65ch;

  --raft-control-h: 36px;
  --raft-row-h: 40px;
  --raft-control-pad-x: 12px;
  --raft-font-size-ui: var(--raft-font-size-md);
  --raft-font-size-caption: var(--raft-font-size-sm);
  --raft-font-size-heading: var(--raft-font-size-lg);
  --raft-card-pad: var(--raft-space-5);
  --raft-field-gap: var(--raft-space-3);

  --raft-radius-chip: 6px;
  --raft-radius-control: 8px;
  --raft-radius-card: 10px;
  --raft-radius-panel: 14px;
  --raft-radius-pill: 999px;

  --raft-motion-instant: 100ms;
  --raft-motion-fast: 150ms;
  --raft-motion-standard: 200ms;
  --raft-motion-slow: 250ms;
  --raft-ease-out: ease-out;
  --raft-ease-overlay: cubic-bezier(0.22, 1, 0.36, 1);

  --raft-z-sticky: 10;
  --raft-z-app-bar: 20;
  --raft-z-menu: 30;
  --raft-z-overlay: 40;
  --raft-z-toast: 50;
}

[data-raft-surface="document"] {
  --raft-color-bg-page: var(--raft-neutral-50);
  --raft-color-bg-surface: var(--raft-neutral-0);
  --raft-color-bg-raised: var(--raft-neutral-0);
  --raft-color-bg-sunken: var(--raft-neutral-50);
  --raft-color-bg-field: var(--raft-neutral-0);
  --raft-color-bg-surface-hover: var(--raft-neutral-100);
  --raft-color-bg-selected: var(--raft-amber-50);
  --raft-color-bg-overlay: rgb(12 29 36 / 0.4);
  --raft-color-text-primary: var(--raft-neutral-950);
  --raft-color-text-secondary: var(--raft-neutral-600);
  --raft-color-text-disabled: var(--raft-neutral-400);
  --raft-color-text-on-accent: var(--raft-neutral-950);
  --raft-color-text-on-danger: var(--raft-neutral-0);
  --raft-color-border-subtle: var(--raft-neutral-200);
  --raft-color-border-default: var(--raft-neutral-300);
  --raft-color-border-strong: var(--raft-neutral-500);
  --raft-color-border-focus: var(--raft-neutral-950);
  --raft-color-separator: var(--raft-neutral-200);
  --raft-color-accent-subtle: var(--raft-amber-50);
  --raft-color-accent-border: var(--raft-amber-500);
  --raft-color-accent-solid: var(--raft-amber-400);
  --raft-color-accent-solid-hover: var(--raft-amber-500);
  --raft-color-accent-text: var(--raft-amber-800);
  --raft-color-danger-subtle: var(--raft-red-50);
  --raft-color-danger-border: var(--raft-red-200);
  --raft-color-danger-solid: var(--raft-red-600);
  --raft-color-danger-text: var(--raft-red-600);
  --raft-color-success-subtle: var(--raft-green-50);
  --raft-color-success-border: var(--raft-green-200);
  --raft-color-success-solid: var(--raft-green-600);
  --raft-color-success-text: var(--raft-green-900);
  --raft-color-ai-text: var(--raft-violet-700);
  --raft-shadow-border: 0 0 0 1px rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06),
    0 2px 4px 0 rgb(0 0 0 / 0.04);
  --raft-shadow-border-hover: 0 0 0 1px rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.08),
    0 2px 4px 0 rgb(0 0 0 / 0.06);
  --raft-shadow-popover: 0 0 0 1px rgb(0 0 0 / 0.06), 0 4px 12px -2px rgb(0 0 0 / 0.08),
    0 12px 32px -8px rgb(0 0 0 / 0.12);
  --raft-shadow-dialog: 0 0 0 1px rgb(0 0 0 / 0.06), 0 24px 64px -12px rgb(0 0 0 / 0.24);
  --raft-image-outline: 1px solid rgb(0 0 0 / 0.1);
  --raft-focus-color: var(--raft-color-border-focus);
}

[data-raft-surface="tool"], .raft-app-bar {
  --raft-color-bg-page: var(--raft-chrome-950);
  --raft-color-bg-surface: var(--raft-chrome-900);
  --raft-color-bg-raised: var(--raft-chrome-800);
  --raft-color-bg-sunken: var(--raft-chrome-950);
  --raft-color-bg-field: var(--raft-chrome-950);
  --raft-color-bg-surface-hover: var(--raft-chrome-750);
  --raft-color-bg-selected: var(--raft-amber-950);
  --raft-color-bg-overlay: rgb(0 0 0 / 0.5);
  --raft-color-bg-stage: var(--raft-chrome-850);
  --raft-color-text-primary: var(--raft-chrome-50);
  --raft-color-text-secondary: var(--raft-chrome-300);
  --raft-color-text-disabled: var(--raft-chrome-400);
  --raft-color-text-on-accent: var(--raft-neutral-950);
  --raft-color-text-on-danger: var(--raft-neutral-950);
  --raft-color-border-subtle: rgb(255 255 255 / 0.08);
  --raft-color-border-default: rgb(255 255 255 / 0.13);
  --raft-color-border-strong: rgb(255 255 255 / 0.36);
  --raft-color-border-focus: var(--raft-amber-400);
  --raft-color-separator: rgb(255 255 255 / 0.08);
  --raft-color-accent-subtle: var(--raft-amber-950);
  --raft-color-accent-border: var(--raft-amber-600);
  --raft-color-accent-solid: var(--raft-amber-400);
  --raft-color-accent-solid-hover: var(--raft-amber-500);
  --raft-color-accent-text: var(--raft-amber-400);
  --raft-color-danger-subtle: var(--raft-red-950);
  --raft-color-danger-border: var(--raft-red-700);
  --raft-color-danger-solid: var(--raft-red-300);
  --raft-color-danger-text: var(--raft-red-300);
  --raft-color-success-subtle: var(--raft-green-950);
  --raft-color-success-border: var(--raft-green-700);
  --raft-color-success-solid: var(--raft-green-300);
  --raft-color-success-text: var(--raft-green-300);
  --raft-color-ai-text: var(--raft-violet-300);
  --raft-shadow-border: 0 0 0 1px rgb(255 255 255 / 0.08);
  --raft-shadow-border-hover: 0 0 0 1px rgb(255 255 255 / 0.13);
  --raft-shadow-popover: 0 0 0 1px rgb(255 255 255 / 0.08), 0 16px 48px rgb(0 0 0 / 0.55);
  --raft-shadow-dialog: 0 0 0 1px rgb(255 255 255 / 0.08), 0 24px 64px rgb(0 0 0 / 0.6);
  --raft-image-outline: 1px solid rgb(255 255 255 / 0.1);
  --raft-focus-color: var(--raft-color-border-focus);
}

[data-raft-surface="tool"] {
  --raft-artboard-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  --raft-rail-width-default: 340px;
}

:where([data-raft-surface]) {
  --raft-app-bar-height: 52px;
  --raft-shadow-company-accent: inset 0 calc(-1 * var(--raft-space-1)) 0 var(--raft-company-accent, transparent);
}

[data-density="compact"] {
  --raft-control-h: 28px;
  --raft-row-h: 32px;
  --raft-control-pad-x: 8px;
  --raft-field-label-w: 104px;
  --raft-font-size-ui: var(--raft-font-size-sm);
  --raft-font-size-caption: var(--raft-font-size-xs);
  --raft-font-size-heading: var(--raft-font-size-sm);
  --raft-card-pad: var(--raft-space-4);
  --raft-field-gap: var(--raft-space-2);
}