/* GENERATED from design-system/surfsale/tokens.json. Do not edit. */

/* SurfSale Design System 1.2.8 · approved */

:root {
  --surfsale-design-system-version: "1.2.8";
  --space-0: 0px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-44: 44px;
  --space-48: 48px;
  --space-64: 64px;
  --space-72: 72px;
  --stroke-1: 1px;
  --stroke-1-5: 1.5px;
  --stroke-2: 2px;
  --stroke-4: 4px;
  --radius-0: 0px;
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-32: 32px;
  --radius-full: 1000px;
  --size-0: 0px;
  --size-2: 2px;
  --size-4: 4px;
  --size-6: 6px;
  --size-8: 8px;
  --size-12: 12px;
  --size-16: 16px;
  --size-20: 20px;
  --size-24: 24px;
  --size-28: 28px;
  --size-32: 32px;
  --size-36: 36px;
  --size-40: 40px;
  --size-44: 44px;
  --size-48: 48px;
  --size-56: 56px;
  --size-60: 60px;
  --size-64: 64px;
  --size-72: 72px;
  --size-80: 80px;
  --size-96: 96px;
  --size-104: 104px;
  --size-112: 112px;
  --size-144: 144px;
  --size-160: 160px;
  --size-168: 168px;
  --size-192: 192px;
  --size-212: 212px;
  --size-240: 240px;
  --size-280: 280px;
  --size-320: 320px;
  --size-360: 360px;
  --size-400: 400px;
  --size-420: 420px;
  --size-440: 440px;
  --size-480: 480px;
  --size-520: 520px;
  --size-560: 560px;
  --size-600: 600px;
  --size-720: 720px;
  --size-800: 800px;
  --size-880: 880px;
  --surface-radius-page: var(--radius-24);
  --surface-radius-content: var(--radius-20);
  --surface-radius-inset: var(--radius-16);
  --layout-page-gap: var(--space-16);
  --workspace-gap: var(--space-16);
  --workspace-rail-width: var(--size-320);
  --workspace-settings-rail-width: var(--size-400);
  --workspace-rail-padding: var(--space-12);
  --workspace-detail-padding: var(--space-32);
  --workspace-detail-padding-mobile: var(--space-20);
  --collection-toolbar-gap: var(--space-8);
  --collection-toolbar-bottom-gap: var(--space-20);
  --collection-sort-width: var(--size-212);
  --filter-panel-padding: var(--space-16);
  --filter-panel-gap: var(--space-12);
  --filter-panel-radius: var(--radius-20);
  --control-height-xs: var(--size-28);
  --control-height-sm: var(--size-36);
  --control-height: var(--size-40);
  --control-height-lg: var(--size-48);
  --control-radius: var(--radius-12);
  --control-padding-x: var(--space-12);
  --control-padding-x-primary: var(--space-16);
  --control-icon-size: var(--size-16);
  --semantic-icon-size: var(--size-20);
  --control-icon-size-lg: var(--size-24);
  --icon-stroke-width: 1.5;
  --textarea-min-height: var(--size-96);
  --switch-track-width: var(--size-36);
  --switch-track-height: var(--size-20);
  --switch-track-radius: var(--radius-12);
  --switch-thumb-size: var(--size-12);
  --switch-thumb-radius: var(--radius-6);
  --switch-thumb-offset: var(--space-4);
  --switch-thumb-offset-on: var(--size-20);
  --avatar-size-sm: var(--size-40);
  --avatar-size-md: var(--size-44);
  --avatar-size-lg: var(--size-48);
  --metric-padding-compact-y: var(--space-16);
  --metric-padding-summary: var(--space-20);
  --metric-height-hero: var(--size-144);
  --focus-ring-width: var(--size-2);
  --color-swatch-size: var(--size-40);
  --image-upload-compact-size: var(--size-56);
  --image-upload-min-height: var(--size-144);
  --dialog-max-width: var(--size-440);
  --border-width-default: 1px;
  --dialog-width-sm: var(--size-440);
  --dialog-width-md: var(--size-560);
  --dialog-width-lg: var(--size-800);
  --data-table-min-width-compact: 640px;
  --data-table-min-width-default: var(--size-720);
  --data-table-min-width-wide: 920px;
  --data-table-row-height-compact: var(--size-40);
  --data-table-row-height-default: var(--size-48);
  --chart-card-width: var(--size-600);
  --chart-plot-height-compact: var(--size-104);
  --chart-plot-height-default: var(--size-160);
  --editor-section-width: var(--size-400);
  --tooltip-max-width: var(--size-320);
  --qr-scanner-frame-width: var(--size-560);
  --date-range-picker-width: var(--size-480);
  --operation-row-width: var(--size-720);
  --operation-row-min-height: var(--size-72);
  --skeleton-row-width: var(--size-720);
  --skeleton-row-height-compact: var(--size-56);
  --skeleton-row-height-default: var(--size-72);
  --email-builder-width: var(--size-880);
  --email-builder-source-panel-width: var(--size-600);
  --email-builder-block-row-width: 408px;
  --email-builder-preview-canvas-width: var(--size-420);
  --email-builder-block-list-width: var(--size-440);
  --layout-gap: var(--layout-page-gap);
  --layout-surface-padding: var(--workspace-detail-padding);
  --layout-surface-padding-mobile: var(--workspace-detail-padding-mobile);
  --surface-radius: var(--surface-radius-page);
  --content-radius: var(--surface-radius-content);
  --inset-radius: var(--surface-radius-inset);
  --action-padding-x: var(--control-padding-x-primary);
  --icon-size: var(--control-icon-size);
  --icon-size-lg: var(--control-icon-size-lg);
  --bg-app: #F3F5F6;
  --surface: #FFFFFF;
  --email-canvas-bg: #FFFFFF;
  --control-bg: #F3F5F6;
  --control-hover-bg: #E4E8EB;
  --field-bg: var(--surface);
  --field-disabled-bg: var(--field-bg);
  --tabs-bg: var(--neutral-100);
  --tabs-active-bg: var(--surface);
  --tabs-hover-bg: var(--neutral-200);
  --neutral-900: #212121;
  --neutral-700: #3C4043;
  --neutral-600: #666768;
  --neutral-500: #6B7074;
  --neutral-400: #B8C2C8;
  --neutral-300: #D5DCE0;
  --neutral-200: #E4E8EB;
  --neutral-100: #F3F5F6;
  --neutral-50: #F8FAFB;
  --border-faint: #ECF0F2;
  --border-strong: var(--neutral-300);
  --control-border: #858C92;
  --text-placeholder: var(--neutral-500);
  --action-primary: #212121;
  --action-primary-hover: var(--neutral-700);
  --on-action-primary: #FFFFFF;
  --on-action-muted: rgba(255, 255, 255, .62);
  --overlay-scrim: rgba(0, 0, 0, .40);
  --layer-dialog: 100;
  --layer-tooltip: 160;
  --layer-portal-menu: 260;
  --layer-support: 300;
  --inverse-action: #FFFFFF;
  --on-inverse-action: #212121;
  --accent: #0C62C8;
  --accent-solid: #0C62C8;
  --accent-hover: #0A54AC;
  --accent-tint: #DDEAFE;
  --focus-ring: var(--accent);
  --switch-track-on: var(--action-primary);
  --switch-track-off: var(--control-border);
  --switch-thumb: #FFFFFF;
  --accent-hover2: #0A54AC;
  --info-hover: var(--accent-tint);
  --success: #16A34A;
  --success-solid: #157A38;
  --success-tint: #F0FDF4;
  --warning: #EA580C;
  --warning-solid: #C2410C;
  --warning-tint: #FFF7ED;
  --danger: #DC2626;
  --danger-solid: #C91F35;
  --danger-tint: #FEF2F2;
  --status-neutral-text: #3C4043;
  --status-accent-text: #0A54AC;
  --status-success-text: #166534;
  --status-warning-text: #9A3412;
  --status-danger-text: #991B1B;
  --violet: var(--accent);
  --violet-tint: var(--accent-tint);
  --r-card: var(--surface-radius-page);
  --r-box: var(--surface-radius-content);
  --r-ctl: var(--control-radius);
  --font: "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --instruction-section-gap: var(--space-16);
  --instruction-step-gap: var(--space-12);
  --instruction-step-padding: var(--space-16);
  --dialog-step-gap: var(--space-8);
  --form-section-gap: var(--space-16);
  --analytics-chart-min-height: var(--size-192);
  --sidebar-tariff-accent: #0C62C8;
  --sidebar-tariff-tint: #DDEAFE;
}

html[data-kb-theme="dark"] {
  --bg-app: #0F1113;
  --surface: #181B1E;
  --control-bg: #24282D;
  --control-hover-bg: #30363C;
  --field-bg: var(--surface);
  --field-disabled-bg: var(--field-bg);
  --tabs-bg: var(--neutral-100);
  --tabs-active-bg: var(--surface);
  --tabs-hover-bg: var(--neutral-200);
  --neutral-900: #F2F4F5;
  --neutral-700: #D9DEE2;
  --neutral-600: #BCC4CA;
  --neutral-500: #959FA7;
  --neutral-400: #97A2AA;
  --neutral-300: #48515A;
  --neutral-200: #353C43;
  --neutral-100: #24292E;
  --neutral-50: #1E2226;
  --border-faint: #292F34;
  --border-strong: #414951;
  --control-border: #6D7882;
  --text-placeholder: var(--neutral-500);
  --accent: #69A9F8;
  --accent-solid: #1B65B7;
  --accent-hover: #8CBDFA;
  --accent-tint: #17365B;
  --focus-ring: var(--accent);
  --switch-track-off: var(--control-border);
  --switch-thumb: #FFFFFF;
  --success: #5DD887;
  --success-solid: #267A42;
  --success-tint: #173D27;
  --warning: #FF9A59;
  --warning-solid: #A84D16;
  --warning-tint: #472817;
  --danger: #FF7777;
  --danger-solid: #CF3E4C;
  --danger-tint: #481D21;
  --status-neutral-text: #D9DEE2;
  --status-accent-text: #B9D9FF;
  --status-success-text: #A7F3C0;
  --status-warning-text: #FFD0AD;
  --status-danger-text: #FFB4B4;
  --action-primary: #0A0B0C;
  --action-primary-hover: #2A2D30;
  --on-action-primary: #FFFFFF;
  --overlay-scrim: rgba(0, 0, 0, .40);
  --layer-dialog: 100;
  --layer-tooltip: 160;
  --layer-portal-menu: 260;
  --layer-support: 300;
  --inverse-action: #FFFFFF;
  --on-inverse-action: #212121;
  --sidebar-tariff-accent: #1B65B7;
  --sidebar-tariff-tint: #17365B;
}

.lucide {
  stroke-width: var(--icon-stroke-width);
}


/* Generated from surfsale/next/foundations.json — catalog pilot only. */
:root {
  --text-12: 12px;
  --text-14: 14px;
  --text-16: 16px;
  --text-20: 20px;
  --text-24: 24px;
  --text-32: 32px;
  --weight-normal: 400;
  --weight-emphasis: 500;
  --tracking: -0.02em;
}