/* ⚠️  GENERATED FILE — DO NOT EDIT BY HAND.
   Source of truth: next-os/design/tokens.json
   Regenerate:      node next-os/design/generate-tokens.mjs
   CI gate:         ./gradlew :composeApp:checkDesignTokens (fails on drift)

   These CSS custom properties mirror the Compose theme so Phase 4's DOM <input>
   overlays (HtmlElementView) can be styled to match the canvas exactly. Brand
   seeds are the DEFAULTS; a tenant brandColor overrides --vf-brand-primary at
   runtime (set on :root from JS), just as it overrides primary in Compose. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('inter-variable.woff2') format('woff2');
}

:root {
  color-scheme: light dark;

  /* Brand seeds (tenant-overridable) */
  --vf-brand-primary: #5B6CFF;
  --vf-brand-secondary: #8B5CF6;
  --vf-brand-accent: #22C7D9;

  /* Font */
  --vf-font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --vf-font-feature-tabular: 'tnum' 1;

  /* Spacing */
  --vf-space-xxs: 2px;
  --vf-space-xs: 4px;
  --vf-space-sm: 8px;
  --vf-space-md: 12px;
  --vf-space-lg: 16px;
  --vf-space-xl: 20px;
  --vf-space-xxl: 24px;
  --vf-space-xxxl: 32px;
  --vf-space-gutter: 20px;

  /* Radii */
  --vf-radius-sm: 6px;
  --vf-radius-md: 10px;
  --vf-radius-lg: 14px;
  --vf-radius-pill: 999px;

  /* Motion */
  --vf-motion-instant: 80ms;
  --vf-motion-fast: 140ms;
  --vf-motion-normal: 220ms;
  --vf-motion-slow: 360ms;

  /* Typography scale */
  --vf-type-display-small-size: 30px;
  --vf-type-display-small-line: 34px;
  --vf-type-display-small-tracking: -0.6px;
  --vf-type-display-small-weight: 900;
  --vf-type-headline-medium-size: 24px;
  --vf-type-headline-medium-line: 28px;
  --vf-type-headline-medium-tracking: -0.5px;
  --vf-type-headline-medium-weight: 900;
  --vf-type-headline-small-size: 20px;
  --vf-type-headline-small-line: 24px;
  --vf-type-headline-small-tracking: -0.4px;
  --vf-type-headline-small-weight: 900;
  --vf-type-title-large-size: 22px;
  --vf-type-title-large-line: 26px;
  --vf-type-title-large-tracking: -0.4px;
  --vf-type-title-large-weight: 700;
  --vf-type-title-medium-size: 15px;
  --vf-type-title-medium-line: 20px;
  --vf-type-title-medium-tracking: -0.1px;
  --vf-type-title-medium-weight: 600;
  --vf-type-title-small-size: 13px;
  --vf-type-title-small-line: 18px;
  --vf-type-title-small-tracking: 0px;
  --vf-type-title-small-weight: 600;
  --vf-type-body-large-size: 15px;
  --vf-type-body-large-line: 21px;
  --vf-type-body-large-tracking: 0px;
  --vf-type-body-large-weight: 400;
  --vf-type-body-medium-size: 13px;
  --vf-type-body-medium-line: 18px;
  --vf-type-body-medium-tracking: 0px;
  --vf-type-body-medium-weight: 400;
  --vf-type-body-small-size: 12px;
  --vf-type-body-small-line: 16px;
  --vf-type-body-small-tracking: 0.1px;
  --vf-type-body-small-weight: 400;
  --vf-type-label-large-size: 13px;
  --vf-type-label-large-line: 16px;
  --vf-type-label-large-tracking: 0.1px;
  --vf-type-label-large-weight: 600;
  --vf-type-label-medium-size: 11px;
  --vf-type-label-medium-line: 14px;
  --vf-type-label-medium-tracking: 0.4px;
  --vf-type-label-medium-weight: 600;
  --vf-type-label-small-size: 10px;
  --vf-type-label-small-line: 13px;
  --vf-type-label-small-tracking: 0.6px;
  --vf-type-label-small-weight: 600;
}

/* Light mode (default) neutrals + semantic */
:root, :root[data-theme='light'] {
  --vf-neutral-page: #F6F7F9;
  --vf-neutral-card: #FFFFFF;
  --vf-neutral-raised: #EEF0F4;
  --vf-neutral-overlay: #FFFFFF;
  --vf-neutral-border: #D9DDE5;
  --vf-neutral-border-variant: #E5E8EE;
  --vf-neutral-on-surface: #13161C;
  --vf-neutral-on-surface-variant: #5C6472;
  --vf-success-container: #E3F1E8;
  --vf-success-on: #11663C;
  --vf-warning-container: #FBEEDA;
  --vf-warning-on: #8A4B0A;
  --vf-danger-container: #FBE7E4;
  --vf-danger-on: #9B1C1C;
  --vf-info-container: #E6ECF9;
  --vf-info-on: #2647A6;
  --vf-error-strong: #B42318;
}

/* Dark mode neutrals + semantic — follows the system, overridable via data-theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
  --vf-neutral-page: #0A0C11;
  --vf-neutral-card: #12151C;
  --vf-neutral-raised: #1B1F29;
  --vf-neutral-overlay: #232834;
  --vf-neutral-border: #2A2F3A;
  --vf-neutral-border-variant: #20242E;
  --vf-neutral-on-surface: #EAECF2;
  --vf-neutral-on-surface-variant: #98A1B2;
  --vf-success-container: #16311F;
  --vf-success-on: #74E39C;
  --vf-warning-container: #352509;
  --vf-warning-on: #F5C368;
  --vf-danger-container: #381816;
  --vf-danger-on: #F4A29B;
  --vf-info-container: #17233F;
  --vf-info-on: #9DBAF6;
  --vf-error-strong: #F87171;
  }
}
:root[data-theme='dark'] {
  --vf-neutral-page: #0A0C11;
  --vf-neutral-card: #12151C;
  --vf-neutral-raised: #1B1F29;
  --vf-neutral-overlay: #232834;
  --vf-neutral-border: #2A2F3A;
  --vf-neutral-border-variant: #20242E;
  --vf-neutral-on-surface: #EAECF2;
  --vf-neutral-on-surface-variant: #98A1B2;
  --vf-success-container: #16311F;
  --vf-success-on: #74E39C;
  --vf-warning-container: #352509;
  --vf-warning-on: #F5C368;
  --vf-danger-container: #381816;
  --vf-danger-on: #F4A29B;
  --vf-info-container: #17233F;
  --vf-info-on: #9DBAF6;
  --vf-error-strong: #F87171;
}