/* Webflow Designer roles for the local replica. Every value was read on 2026-10-13
   from the Designer of Claude Test (claude-test-465b00) with getComputedStyle; the
   source token or element is named on each line (see observed/tokens.json,
   observed/style-panel.json, observed/class-controls.json). These roles are separate
   from the Francesco Design System, which only the editorial frame uses. */
@font-face { font-family: 'DF Inter'; font-weight: 400; font-style: normal; src: url('../assets/fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'DF Inter'; font-weight: 500; font-style: normal; src: url('../assets/fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'DF Inter'; font-weight: 600; font-style: normal; src: url('../assets/fonts/inter-latin-600-normal.woff2') format('woff2'); }

.df-app {
  --wf-font: 'DF Inter', -apple-system, system-ui, sans-serif;  /* body font-family: Inter */
  --wf-tracking: -0.115px;                                       /* body letter-spacing */
  --wf-bg-1: #ffffff;              /* --colors-background-1 */
  --wf-bg-2: #f5f5f5;              /* --colors-background-2: navigator, canvas bar, empty-state card */
  --wf-bg-3: #e8e8e8;              /* --colors-background-3 / --colors-ui-canvas-background; class menu */
  --wf-control: #efefef;           /* --colors-action-secondary-background base colour */
  --wf-control-sheen: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 100%); /* same token, gradient part */
  --wf-border: #e0e0e0;            /* --colors-border-default / --colors-border-1 */
  --wf-border-input: #dbdbdb;      /* --colors-border-text-input / --colors-border-2 */
  --wf-text: #000000;              /* --colors-text-primary */
  --wf-text-2: rgba(0,0,0,0.6);    /* --colors-text-secondary */
  --wf-text-dim: rgba(0,0,0,0.5);  /* --colors-text-dimmed: placeholders, 'None' */
  --wf-hover: rgba(0,0,0,0.1);     /* --colors-ui-background-active: active mode/breakpoint button */
  --wf-item-hover: rgba(0,0,0,0.04);  /* class menu option under the pointer (computed) */
  --wf-blue: #146ef5;              /* --colors-action-primary-background: chip, selection, set values */
  --wf-blue-soft: rgba(20,110,245,0.1);   /* set-value label/value background, selected navigator row */
  --wf-hover-outline: rgb(36,150,255);    /* outline-hovered-node border */
  --wf-hover-label: rgb(0,132,255);       /* outline-tag text */
  --wf-orange: rgb(191,71,7);             /* inheritance-selector text, inherited labels */
  --wf-orange-soft: rgba(223,100,12,0.1); /* inherited property label background */
  --wf-text-selection: rgb(0,102,255);    /* ::selection inside the editable chip */
  --wf-swatch-base: rgb(217,217,217);     /* swatch layer under the colour */
  --wf-shadow-input: inset 0px 16px 16px -16px rgba(0,0,0,0.01), inset 0px 12px 12px -12px rgba(0,0,0,0.01), inset 0px 8px 8px -8px rgba(0,0,0,0.02), inset 0px 4px 4px -4px rgba(0,0,0,0.02), inset 0px 3px 3px -3px rgba(0,0,0,0.02), inset 0px 1px 1px -1px rgba(0,0,0,0.04); /* --box-shadows-input-inner */
  --wf-shadow-control: 0px 0px 0px 0.5px rgba(0,0,0,0.08), 0px -0.5px 1px 0px rgba(0,0,0,0.10), 0px 1.5px 1px 0px rgba(255,255,255,0.35), 0px 1px 1px 0px rgba(0,0,0,0.04), 0px 0.5px 1px 0px rgba(0,0,0,0.05); /* --box-shadows-action-secondary */
  --wf-shadow-menu: rgba(255,255,255,0.12) 0px 0.5px 0.5px 0px inset, rgba(0,0,0,0.04) 0px 12px 24px 8px, rgba(0,0,0,0.04) 0px 8px 16px 4px, rgba(0,0,0,0.04) 0px 4px 8px 2px, rgba(0,0,0,0.04) 0px 2px 6px 0px, rgba(0,0,0,0.25) 0px 0px 1px 0px; /* class menu computed box-shadow */
  --wf-fuse-filter: drop-shadow(0px -0.5px 0px rgba(0,0,0,0.16)) drop-shadow(0px 1px 0px rgba(0,0,0,0.1)); /* --colors-ui-fuse-control-filter (Spacing box) */
  --wf-page-shadow: 0 0 40px rgba(0,0,0,0.1);  /* canvas page wrapper */
  --wf-copilot: linear-gradient(135deg, rgb(115,76,224) 33%, rgba(0,125,240,0.8) 100%); /* Copilot toggle */
}