/* Generated from design/system/tokens.json. Run pnpm --filter @grooovycrm/ui tokens:build. */
:root, :host {
  --color-page: #FAFBFC;
  --color-card: #FFFFFF;
  --color-sunk: #F4F6F8;
  --color-elev: #FFFFFF;
  --color-fill: #FFFFFF;
  --color-line: #E7EBF0;
  --color-line-strong: #8B95A3;
  --color-fg: #181818;
  --color-fg-2: #454D59;
  --color-fg-3: #667181;
  --color-primary: #FF862B;
  --color-primary-fg: #321606;
  --color-primary-hover: #FF9B4E;
  --color-accent: #B94708;
  --color-accent-hover: #943706;
  --color-accent-weak: #FFF0DF;
  --color-accent-on-weak: #943706;
  --color-success: #116B45;
  --color-success-fg: #FFFFFF;
  --color-success-weak: #E6F4EC;
  --color-warning: #8A5800;
  --color-warning-fg: #FFFFFF;
  --color-warning-weak: #FBF0DC;
  --color-danger: #B3261E;
  --color-danger-fg: #FFFFFF;
  --color-danger-weak: #FBECEB;
  --color-line-soft: #EFF2F5;
  --color-line-default: #D6DCE4;
  --color-fg-subtle: #667181;
  --color-accent-fg: #FFFFFF;
  --color-signal: #FF862B;
  --color-signal-fg: #321606;
  --color-accent-line: #F4C49E;
  --color-highlight: #B94708;
  --color-highlight-hover: #943706;
  --color-highlight-weak: #FFF0DF;
  --color-highlight-line: #F4C49E;
  --color-focus: #17181A;
  --color-focus-fg: #FFFFFF;
  --color-highlight-on-weak: #943706;
  --color-info: #1D5FA8;
  --color-info-fg: #FFFFFF;
  --color-info-weak: #E8F1FB;
  --color-success-line: #ACCBBE;
  --color-warning-line: #D6C5A6;
  --color-danger-line: #E4B3B0;
  --color-info-line: #B0C7E1;
  --color-highlight-fg: #FFFFFF;
  --color-inverse: #181818;
  --color-inverse-fg: #F8F6F2;
  --color-hero-ink: #181818;
  --color-hero-light: #FFF8EF;
  --color-overlay: rgb(16 24 40 / 0.35);
  --color-fg-secondary: #454D59;
  --color-fg-muted: #667181;
  --color-soft: #FFFFFF;
  --color-brand: #FF862B;
  --color-brand-fg: #321606;
  --color-on-brand: #321606;
  --color-action: #FF862B;
  --color-action-fg: #321606;
  --color-action-hover: #FF9B4E;
  --color-focus-ring: #B94708;
  --layout-site-max-width: 1440px;
  --layout-sidebar-width: 248px;
  --layout-workspace-max-width: 1440px;
  --layout-form-max: 760px;
  --layout-auth-max: 420px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 32px;
  --radius-full: 9999px;
  --radius-hero: 48px;
  --radius-control: var(--radius-md);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-0-5: 2px;
  --space-1-5: 6px;
  --space-2-5: 10px;
  --space-3-5: 14px;
  --space-4-5: 18px;
  --space-5-5: 22px;
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 340ms;
  --duration-reveal: 620ms;
  --duration-scene: 2400ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --control-sm: 28px;
  --control-md: 36px;
  --control-lg: 44px;
  --control-touch: 44px;
  --shadow-1: 0 1px 1px 0 oklch(0.18 0.025 268 / 0.02);
  --shadow-2: 0 1px 2px rgb(16 24 40 / 0.025), 0 3px 12px rgb(16 24 40 / 0.035);
  --shadow-3: 0 2px 6px rgb(16 24 40 / 0.04), 0 8px 24px rgb(16 24 40 / 0.06);
  --shadow-4: 0 6px 14px -2px oklch(0.18 0.025 268 / 0.07), 0 12px 24px -6px oklch(0.18 0.025 268 / 0.09);
  --shadow-5: 0 16px 36px -6px oklch(0.18 0.025 268 / 0.12), 0 32px 60px -12px oklch(0.18 0.025 268 / 0.16);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-focus-ring) 22%, transparent);
  --shadow-popover: 0 4px 8px 0 oklch(0.18 0.025 268 / 0.04), 0 12px 32px -4px oklch(0.18 0.025 268 / 0.12);
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-overlay: 1200;
  --z-modal: 1300;
  --z-popover: 1350;
  --z-toast: 1400;
  --color-fixed-light: #FFFFFF;
  --color-fixed-dark: #000000;
  --color-media-overlay: rgb(0 0 0 / 0.7);
  --space-relative-1: 0.25rem;
  --space-relative-2: 0.5rem;
  --space-relative-3: 0.75rem;
  --space-relative-4: 1rem;
  --space-relative-5: 1.25rem;
  --space-relative-6: 1.5rem;
  --space-relative-8: 2rem;
  --space-relative-10: 2.5rem;
  --space-relative-12: 3rem;
  --space-relative-0-5: 0.125rem;
  --space-relative-1-5: 0.375rem;
  --space-relative-2-5: 0.625rem;
  --space-relative-3-5: 0.875rem;
  --font-sans: 'Onest Variable', 'Onest', system-ui, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: 'JetBrains Mono Variable', ui-monospace, monospace;
  --font-size-10: 10px;
  --font-size-11: 11px;
  --font-size-12: 12px;
  --font-size-13: 13px;
  --font-size-14: 14px;
  --font-size-15: 15px;
  --font-size-16: 16px;
  --font-size-17: 17px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-22: 22px;
  --font-size-24: 24px;
  --font-size-28: 28px;
  --font-size-30: 30px;
  --font-size-32: 32px;
  --font-size-36: 36px;
  --font-size-40: 40px;
  --font-size-48: 48px;
  --font-size-64: 64px;
  --font-size-84: 84px;
  --surface-radius: var(--radius-lg);
  --surface-padding: var(--space-6);
  --surface-shadow: var(--shadow-2);
  --surface-border: 1px solid var(--color-line-soft);
  --field-radius: var(--radius-md);
  --field-height: var(--control-lg);
  --field-padding: var(--space-2) var(--space-3);
  --field-border: 1px solid var(--color-line-default);
  --brand-logo-bg: #FF862B;
  --brand-logo-fg: var(--color-fixed-light);
  --type-caption: 500 11.5px/1.35 var(--font-sans);
  --type-caption-size: 11.5px;
  --type-caption-tracking: normal;
  --type-body-sm: 400 13px/1.5 var(--font-sans);
  --type-body-sm-size: 13px;
  --type-body-sm-tracking: normal;
  --type-body-md: 400 15px/1.55 var(--font-sans);
  --type-body-md-size: 15px;
  --type-body-md-tracking: normal;
  --type-input: 400 16px/1.5 var(--font-sans);
  --type-input-size: 16px;
  --type-input-tracking: normal;
  --type-body-lg: 400 17px/1.55 var(--font-sans);
  --type-body-lg-size: 17px;
  --type-body-lg-tracking: normal;
  --type-heading-4: 600 18px/1.3 var(--font-sans);
  --type-heading-4-size: 18px;
  --type-heading-4-tracking: normal;
  --type-heading-3: 600 22px/1.25 var(--font-sans);
  --type-heading-3-size: 22px;
  --type-heading-3-tracking: normal;
  --type-heading-2: 650 30px/1.15 var(--font-sans);
  --type-heading-2-size: 30px;
  --type-heading-2-tracking: -0.03em;
  --type-heading-1: 700 40px/1.1 var(--font-sans);
  --type-heading-1-size: 40px;
  --type-heading-1-tracking: -0.04em;
  --type-display-lg: 500 64px/1 var(--font-sans);
  --type-display-lg-size: 64px;
  --type-display-lg-tracking: normal;
  --type-display-xl: 600 84px/0.95 var(--font-sans);
  --type-display-xl-size: 84px;
  --type-display-xl-tracking: -0.035em;
  --type-code: 500 13px/1.45 var(--font-mono);
  --type-code-size: 13px;
  --type-code-tracking: normal;
  --type-metric: 650 32px/1.05 var(--font-sans);
  --type-metric-size: 32px;
  --type-metric-tracking: -0.02em;
  --type-site-caption: 500 12px/1.4 var(--font-sans);
  --type-site-caption-size: 12px;
  --type-site-caption-tracking: normal;
  --type-site-small: 400 14px/1.5 var(--font-sans);
  --type-site-small-size: 14px;
  --type-site-small-tracking: normal;
  --type-site-body: 400 17px/1.6 var(--font-sans);
  --type-site-body-size: 17px;
  --type-site-body-tracking: normal;
  --type-site-heading-4: 600 20px/1.3 var(--font-sans);
  --type-site-heading-4-size: 20px;
  --type-site-heading-4-tracking: normal;
  --type-site-heading-3: 600 28px/1.2 var(--font-sans);
  --type-site-heading-3-size: 28px;
  --type-site-heading-3-tracking: normal;
  --type-site-heading-2: 600 40px/1.16 var(--font-sans);
  --type-site-heading-2-size: 40px;
  --type-site-heading-2-tracking: -0.035em;
  --type-site-display: 600 64px/1.12 var(--font-sans);
  --type-site-display-size: 64px;
  --type-site-display-tracking: -0.04em;
  --type-site-numeric: 500 14px/1.4 var(--font-sans);
  --type-site-numeric-size: 14px;
  --type-site-numeric-tracking: normal;
  --type-site-hero: 650 64px/1.08 var(--font-sans);
  --type-site-hero-size: 64px;
  --type-site-hero-tracking: -0.045em;
  --dur-fast: var(--duration-fast);
  --dur-base: var(--duration-base);
  --dur-slow: var(--duration-slow);
  color-scheme: light;
}
[data-theme="dark"], :host([data-theme="dark"]) {
  --color-page: #1D1E20;
  --color-card: #242527;
  --color-sunk: #292A2D;
  --color-elev: #2A2C2F;
  --color-fill: #242527;
  --color-line: #373A3F;
  --color-line-strong: #858D99;
  --color-fg: #F4F5F7;
  --color-fg-2: #D0D4DB;
  --color-fg-3: #A7AFBB;
  --color-primary: #FF9B4E;
  --color-primary-fg: #321606;
  --color-primary-hover: #FFB374;
  --color-accent: #FFAD70;
  --color-accent-hover: #FFBF8E;
  --color-accent-weak: #493527;
  --color-accent-on-weak: #FFC18F;
  --color-success: #56C08D;
  --color-success-fg: #061417;
  --color-success-weak: #12241C;
  --color-warning: #E0B055;
  --color-warning-fg: #061417;
  --color-warning-weak: #271E10;
  --color-danger: #F2837B;
  --color-danger-fg: #061417;
  --color-danger-weak: #2A1517;
  --color-line-soft: #2C2E32;
  --color-line-default: #484D55;
  --color-fg-subtle: #A7AFBB;
  --color-accent-fg: #21150D;
  --color-signal: #FF9B4E;
  --color-signal-fg: #321606;
  --color-accent-line: #71462D;
  --color-highlight: #FFAD70;
  --color-highlight-hover: #FFBF8E;
  --color-highlight-weak: #302015;
  --color-highlight-line: #71462D;
  --color-focus: #393F45;
  --color-focus-fg: #EDEDEE;
  --color-highlight-on-weak: #FFBF8E;
  --color-info: #6FA8EC;
  --color-info-fg: #061417;
  --color-info-weak: #122033;
  --color-success-line: #2F5443;
  --color-warning-line: #5F4E2F;
  --color-danger-line: #663F3D;
  --color-info-line: #384C64;
  --color-highlight-fg: #21150D;
  --color-inverse: #101113;
  --color-inverse-fg: #F8F6F2;
  --color-hero-ink: #181818;
  --color-hero-light: #FFF8EF;
  --color-overlay: rgb(0 0 0 / 0.5);
  --color-fg-secondary: #D0D4DB;
  --color-fg-muted: #A7AFBB;
  --color-soft: #242527;
  --color-brand: #FF9B4E;
  --color-brand-fg: #321606;
  --color-on-brand: #321606;
  --color-action: #FF9B4E;
  --color-action-fg: #321606;
  --color-action-hover: #FFB374;
  --color-focus-ring: #FFAD70;
  color-scheme: dark;
}
.type-caption { font: var(--type-caption); }
.type-body-sm { font: var(--type-body-sm); }
.type-body-md { font: var(--type-body-md); }
.type-input { font: var(--type-input); }
.type-body-lg { font: var(--type-body-lg); }
.type-heading-4 { font: var(--type-heading-4); }
.type-heading-3 { font: var(--type-heading-3); }
.type-heading-2 { font: var(--type-heading-2); letter-spacing: -0.03em; }
.type-heading-1 { font: var(--type-heading-1); letter-spacing: -0.04em; }
.type-display-lg { font: var(--type-display-lg); }
.type-display-xl { font: var(--type-display-xl); letter-spacing: -0.035em; }
.type-code { font: var(--type-code); font-variant-numeric: tabular-nums; }
.type-metric { font: var(--type-metric); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }