/* Kerf design tokens and fonts (from the Kerf design system). Fonts are served from /doors/assets/fonts. */
/* ============================================================
   Fusion Native Tool UI — Design System
   Root global-CSS entry point. Consumers link THIS file only.
   Keep it as @import lines (plus a thin reset); all real tokens
   live in tokens/*.css.
   ============================================================ */

/* ============================================================
   FONTS — Fusion-native tool UI
   ------------------------------------------------------------
   The application chrome (command dialogs, browser, toolbar)
   renders in the host OS UI font — Segoe UI on Windows, San
   Francisco on macOS, Roboto/Noto on Linux. We mirror that with
   a native system stack so the recreation matches the real app
   pixel-for-pixel on each platform.

   Brand / marketing headings and the KERF wordmark use "Space
   Grotesk" (Google Fonts) — a precise, geometric grotesque whose
   slightly mechanical forms suit a precision cut/CNC identity. This is
   the chosen brand typeface (an original choice for a new product), not
   a substitute.
   ============================================================ */

/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/doors/assets/fonts/space-grotesk-vietnamese.woff2") format("woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/doors/assets/fonts/space-grotesk-latin-ext.woff2") format("woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/doors/assets/fonts/space-grotesk-latin.woff2") format("woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/doors/assets/fonts/space-grotesk-vietnamese.woff2") format("woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/doors/assets/fonts/space-grotesk-latin-ext.woff2") format("woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/doors/assets/fonts/space-grotesk-latin.woff2") format("woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/doors/assets/fonts/space-grotesk-vietnamese.woff2") format("woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/doors/assets/fonts/space-grotesk-latin-ext.woff2") format("woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/doors/assets/fonts/space-grotesk-latin.woff2") format("woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/doors/assets/fonts/space-grotesk-vietnamese.woff2") format("woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/doors/assets/fonts/space-grotesk-latin-ext.woff2") format("woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/doors/assets/fonts/space-grotesk-latin.woff2") format("woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ------------------------------------------------------------
   Mono — Cascadia Mono (the genuine family, NOT a substitute).
   Fusion's editor/value font. Cascadia is open source (SIL OFL),
   self-hosted here via Fontsource so dimensions, expressions and
   cut-list figures render in the real typeface. If a user uploads
   a local Cascadia Mono file, these CDN faces remain a safe
   fallback. The --font-mono token still leads with 'Cascadia Mono'
   and keeps its system-mono fallback stack.
   ------------------------------------------------------------ */
@font-face {
  font-family: "Cascadia Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/doors/assets/fonts/cascadia-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "Cascadia Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/doors/assets/fonts/cascadia-mono-600.woff2") format("woff2");
}

/* The UI font is the native system stack (no file needed); the brand
   typeface (Space Grotesk) loads from Google Fonts above. */

/* ============================================================
   COLORS — Fusion-native light tool UI
   Sampled to match Autodesk Fusion's default light theme: the
   cool gray application chrome, white inset inputs, and the
   signature cyan-blue selection/interaction accent (#0696D7).
   ============================================================ */

:root {
  /* ---- 3D Canvas (viewport) ---------------------------------- */
  --canvas-top:        #d4dbe1;   /* viewport gradient, top    */
  --canvas-bottom:     #a3aeb8;   /* viewport gradient, bottom */
  --canvas-grid:       #ffffff26; /* construction-plane grid   */
  --canvas-ground:     #97a2ac;   /* ground shadow plane       */

  /* ---- Application chrome surfaces --------------------------- */
  --surface-app:       #f1f1f1;   /* top ribbon / toolbar      */
  --surface-panel:     #f0f0f0;   /* command dialog body       */
  --surface-browser:   #ededed;   /* left browser tree         */
  --surface-header:    #e4e4e4;   /* dialog title + group bars */
  --surface-input:     #ffffff;   /* value / text fields       */
  --surface-raised:    #ffffff;   /* popups, dropdowns, tips   */
  --surface-hover:     #e3e3e3;   /* row / button hover        */
  --surface-active:    #d7d7d7;   /* pressed                   */
  --surface-statusbar: #e9e9e9;   /* bottom status / nav bar   */
  --surface-overlay:   #00000059; /* modal scrim               */

  /* ---- Borders & dividers ------------------------------------ */
  --border-strong:     #adadad;   /* input outlines            */
  --border-default:    #cccccc;   /* group / card outlines     */
  --border-subtle:     #dcdcdc;   /* hairline dividers         */
  --divider:           #d0d0d0;

  /* ---- Text -------------------------------------------------- */
  --text-primary:      #2b2b2b;   /* values, body              */
  --text-label:        #3f3f3f;   /* input labels              */
  --text-secondary:    #5c5c5c;   /* helper / legend copy      */
  --text-muted:        #8a8a8a;   /* hints, units, counts      */
  --text-disabled:     #b2b2b2;
  --text-on-accent:    #ffffff;
  --text-link:         #0a6aa0;

  /* ---- Accent — Fusion cyan-blue ----------------------------- */
  --accent:            #0696d7;   /* selection / focus / active */
  --accent-hover:      #0a82bd;
  --accent-active:     #086d9e;
  --accent-soft:       #d9edf9;   /* active selection input bg  */
  --accent-soft-hover: #cbe6f6;
  --accent-border:     #4db4e3;
  --focus-ring:        #0696d7;

  /* ---- 3D selection states ----------------------------------- */
  --select-3d:         #1aa3e0;   /* committed selection        */
  --prehighlight-3d:   #7fd3f2;   /* hover pre-highlight        */
  --select-edge:       #ffae00;   /* selected edge highlight    */

  /* ---- Dialog buttons (subtle vertical gradient) ------------- */
  --btn-face-top:      #fcfcfc;
  --btn-face-bottom:   #e7e7e7;
  --btn-border:        #b2b2b2;
  --btn-hover-top:     #ffffff;
  --btn-hover-bottom:  #e9f4fb;
  --btn-hover-border:  #4db4e3;
  --btn-press:         #dadada;
  --btn-disabled-face: #efefef;
  --btn-disabled-text: #b6b6b6;

  /* ---- Semantic --------------------------------------------- */
  --success:           #3c9d3c;
  --success-soft:      #e4f3e4;
  --warning:           #e0a200;
  --warning-soft:      #fbf0d2;
  --error:             #d2161e;   /* validation red            */
  --error-soft:        #fbe3e4;
  --info:              #0696d7;
  --info-soft:         #d9edf9;
}

/* ============================================================
   TYPOGRAPHY — Fusion-native tool UI
   The app UI is dense and small (≈12px base). Labels, values and
   group headers all sit in a tight vertical rhythm. Brand display
   type (Space Grotesk) is reserved for marketing and specimen
   headings, never the command dialog itself.
   ============================================================ */

:root {
  /* ---- Families --------------------------------------------- */
  --font-ui: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto",
             "Helvetica Neue", "Noto Sans", system-ui, sans-serif;
  --font-brand: "Space Grotesk", "Segoe UI", system-ui, sans-serif; /* KERF brand typeface */
  --font-mono: "Cascadia Mono", "SF Mono", "Consolas", "Roboto Mono",
               ui-monospace, monospace; /* value expressions, cut-list, dimensions */

  /* ---- Sizes (UI scale — deliberately small) ---------------- */
  --text-2xs: 10px;   /* badges, unit suffixes        */
  --text-xs:  11px;   /* hints, counts, tooltips      */
  --text-sm:  12px;   /* DEFAULT — labels, values     */
  --text-md:  13px;   /* dialog title, group headers  */
  --text-lg:  15px;   /* command name in title bar    */
  --text-xl:  20px;   /* card / section headings      */
  --text-2xl: 28px;   /* brand display                */
  --text-3xl: 40px;   /* hero brand display           */

  /* ---- Weights ---------------------------------------------- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- Line heights ----------------------------------------- */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;

  /* ---- Letter spacing --------------------------------------- */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;   /* small all-caps eyebrows */

  /* ---- Semantic roles --------------------------------------- */
  --type-label:    var(--weight-regular) var(--text-sm)/var(--leading-snug) var(--font-ui);
  --type-value:    var(--weight-regular) var(--text-sm)/var(--leading-tight) var(--font-ui);
  --type-group:    var(--weight-semibold) var(--text-sm)/var(--leading-tight) var(--font-ui);
  --type-title:    var(--weight-semibold) var(--text-md)/var(--leading-tight) var(--font-ui);
  --type-hint:     var(--weight-regular) var(--text-xs)/var(--leading-snug) var(--font-ui);
}

/* ============================================================
   SPACING, SIZING & RADII — Fusion-native tool UI
   The command dialog is a tight, two-column stack: a fixed label
   column on the left, controls on the right. Rows are short and
   dividers hairline. These tokens encode that density.
   ============================================================ */

:root {
  /* ---- Base spacing scale (4px base, half-steps for density) - */
  --space-0:  0;
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  6px;
  --space-4:  8px;
  --space-5:  12px;
  --space-6:  16px;
  --space-7:  20px;
  --space-8:  24px;
  --space-10: 32px;

  /* ---- Command-dialog geometry ------------------------------ */
  --dialog-width:   300px;   /* left-docked palette width        */
  --dialog-pad:     8px;     /* dialog body inset                */
  --row-h:          24px;    /* single input row height          */
  --row-gap:        4px;     /* gap between rows                  */
  --label-col:      118px;   /* fixed label column width         */
  --group-indent:   10px;    /* group children left indent       */
  --control-h:      22px;    /* field / control height           */

  /* ---- Touch / hit targets ---------------------------------- */
  --tool-btn:       24px;    /* small ribbon icon button         */
  --tool-btn-lg:    48px;    /* large promoted ribbon button     */
  --hit-min:        24px;

  /* ---- Radii (Fusion is near-square) ------------------------ */
  --radius-xs: 1px;
  --radius-sm: 2px;          /* inputs, buttons                  */
  --radius-md: 3px;          /* tool buttons, popups             */
  --radius-lg: 4px;          /* cards, dialog frame              */
  --radius-pill: 999px;      /* nav-bar pill, count badges       */

  /* ---- Borders ---------------------------------------------- */
  --bw-hairline: 1px;
  --bw-focus:    1px;
  --bw-accent:   2px;
}

/* ============================================================
   ELEVATION & EFFECTS — Fusion-native tool UI
   Fusion uses very restrained elevation: flat chrome, hairline
   insets for fields, and a soft drop shadow only on transient
   surfaces (popups, dropdowns, tooltips, floating dialogs).
   ============================================================ */

:root {
  /* ---- Inset (fields look recessed into the panel) ---------- */
  --inset-field:  inset 0 1px 1px rgba(0,0,0,0.06);
  --inset-well:   inset 0 1px 2px rgba(0,0,0,0.10);

  /* ---- Drop shadows (transient surfaces only) --------------- */
  --shadow-popup:   0 2px 8px rgba(0,0,0,0.28);
  --shadow-dialog:  0 1px 5px rgba(0,0,0,0.22);
  --shadow-tooltip: 0 2px 6px rgba(0,0,0,0.30);
  --shadow-toolbar: 0 1px 0 rgba(0,0,0,0.06);

  /* ---- Focus ring ------------------------------------------- */
  --ring-focus: 0 0 0 1px var(--focus-ring);

  /* ---- Motion (Fusion is quick + subtle, no bounce) --------- */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1); /* @kind other */
  --dur-fast:      90ms;  /* @kind other */
  --dur-base:      140ms; /* @kind other */
  --dur-slow:      220ms; /* @kind other */

  /* ---- Group disclosure caret rotation ---------------------- */
  --caret-collapsed: rotate(-90deg); /* @kind other */
  --caret-expanded:  rotate(0deg);   /* @kind other */
}

/* ============================================================
   KERF — Brand tokens
   The product identity layer that sits ON TOP of the Fusion-native
   tool UI. The in-canvas command still uses Fusion's blue selection
   accent (host convention); the BRAND surfaces — logo, ribbon icon,
   tooltip banner, splash, marketing — use Kerf Amber + ink + paper.
   ============================================================ */

:root {
  /* ---- Core brand palette ----------------------------------- */
  --brand-ink:        #18181a;   /* wordmark, mark outline, brand text */
  --brand-ink-soft:   #3a3733;   /* secondary brand text              */
  --brand-graphite:   #6b6660;   /* muted brand text / descriptor     */

  --brand-amber:      #e0712c;   /* SIGNATURE — saw-blade amber        */
  --brand-amber-deep: #c75f22;   /* hover / pressed / scored kerf line */
  --brand-amber-bright:#f0863f;  /* highlight                          */
  --brand-amber-soft: #fbede1;   /* tint surface                       */

  --brand-paper:      #f7f4f1;   /* warm off-white brand surface       */
  --brand-paper-deep: #ece6df;   /* warm panel                         */
  --brand-line:       #e3ddd6;   /* warm hairline on paper             */

  /* ---- Logo aliases ----------------------------------------- */
  --logo-ink:    var(--brand-ink);
  --logo-accent: var(--brand-amber);
  --logo-kerf:   var(--brand-amber-deep);

  /* ---- Geometry --------------------------------------------- */
  --logo-mark-size: 28px;        /* default mark height in a lockup    @kind spacing */
  --logo-clearspace: 0.5; /* @kind other */
  --wordmark-tracking: 0.13em;   /* KERF wordmark letter-spacing       @kind other */
}


/* ---- Minimal reset shared by every specimen, card & UI kit --- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  margin: 0;
  font: var(--type-value);
  color: var(--text-primary);
}

/* Honour the dense default UI rhythm everywhere the kit renders */
button, input, select, textarea {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: inherit;
}